javascript - 在页面左侧和右侧显示 Bootstrap 井

Question

我使用 bootstrap 井来模拟卡片。我目前有两种不同类型的卡片，“普通”卡片位于屏幕中间，“特殊”卡片位于左侧和右侧。

我正在尝试复制的模板:

问题:

1.) bootstrap 中的井似乎不想转到页面的最左边或最右边。它们似乎总是包含在一个不可见的 div/border 中，除非使用绝对定位，否则不会去任何其他地方。我不能使用绝对定位，因为如果放大，中间内容会与它重叠。它摆脱了需要保留的 Bootstrap 的响应方面。

2.) 在不使用绝对定位的情况下，在侧面制作新的“特殊”卡片会增加额外的垂直空间，这会使页面中间的内容下沉

body {
  background-color: #5C67B6;
}

html,
body {
  height: 100%;
  padding-top: 70px;
}

.btn-purple {
  color: #fff;
  background-color: #5C67B6;
  border-color: #5C67B6;
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -140px;
}

.btn-info {
  color: #fff;
  background-color: #5C67B6;
  border-color: #5C67B6;
  position: absolute;
  bottom: 30px;
  right: 10%;
  margin-left: 140px;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
  color: #fff;
  background-color: #4b5496;
  border-color: #4b5496;
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
  color: #fff;
  background-color: #4b5496;
  border-color: #4b5496;
}

.customClass {
  width: 700px;
  max-width: 100%;
  margin: 0px auto;
}

.turbo {
  background: #7280e5;
  color: white;
  border-color: #4b5496;
}

.well {
  min-height: 320px;
  max-height: 320px;
  height: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.well:hover {
  background: #7280e5;
  color: white;
  border-color: #4b5496;
}

.well p {
  margin-bottom: 50px;
}

.header {
  display: inline-block;
  width: 100%;
  border: 1px solid red;
}

.playerOne {
  float: right;
  text-align: center;
  width: 300px;
  border: 5px solid #dadada;
  background-color: #dadada;
  border-radius: 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 15px #5dbcd2;
  -moz-box-shadow: 0px 0px 15px #5dbcd2;
  box-shadow: 0px 0px 15px #5dbcd2;
}

.playerTwo {
  float: left;
  text-align: center;
  width: 300px;
  border: 5px solid #dadada;
  background-color: #dadada;
  border-radius: 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 15px #5dbcd2;
  -moz-box-shadow: 0px 0px 15px #5dbcd2;
  box-shadow: 0px 0px 15px #5dbcd2;
}

@media only screen and (max-width: 900px) {
  .playerOne {
    width: 650px;
  }
  .playerTwo {
    width: 633px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
  <div class="playerOne">
    Special Cards
  </div>
  <div class="playerTwo">
    Special Cards
  </div>
</div>

<center>
  <div class="input-group" style="width: 500px; padding-bottom: 2cm;">
    <input type="text" class="form-control" placeholder="Search cards!">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
  </div>
  <!-- /input-group -->
</center>
<div class="content">
  <div class="container content-sm customClass">
    <div class="row">
      <center>
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li>
              <a aria-label="Previous" href="#"><span aria-hidden="true">&laquo;</span></a>
            </li>
            <li class="active">
              <a href="#">1</a>
            </li>
            <li>
              <a href="#">2</a>
            </li>
            <li>
              <a href="#">3</a>
            </li>
            <li>
              <a href="#">4</a>
            </li>
            <li>
              <a href="#">5</a>
            </li>
            <li>
              <a aria-label="Next" href="#"><span aria-hidden="true">&raquo;</span></a>
            </li>
          </ul>
        </nav>
      </center>
      <div class="col-sm-6 col-xs-12">
        <div class="well">
          <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Card</h3>
          <p>This is Text. This is Text. This is Text. </p>
          <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a>
          <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a>
        </div>
      </div>
      <div class="col-sm-6 col-xs-12">
        <div class="well">
          <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Card</h3>
          <p>This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. </p>
          <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a>
          <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a>
        </div>
      </div>
      <div class="col-sm-6 col-xs-12">
        <div class="well turbo">
          <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Card</h3>
          <p>This is Text. This is Text. This is Text. </p>
          <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a>
          <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a>
        </div>
      </div>
      <div class="col-sm-6 col-xs-12">
        <div class="well">
          <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Card</h3>
          <p>This is Text. This is Text. This is Text. </p>
          <a href="#" class="btn btn-purple btn-sm" style="vertical-align: bottom;"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a>
          <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a>
        </div>
      </div>
      <div class="col-sm-6 col-xs-12">
        <div class="well">
          <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Card</h3>
          <p>This is Text. This is Text. This is Text. This is Text. </p>
          <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a>
          <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button</a>
        </div>
      </div>
      <div class="col-sm-6 col-xs-12">
        <div class="well">
          <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Card</h3>
          <p>This is Text. This is Text. This is Text. This is Text. </p>
          <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a>
          <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a>
        </div>
      </div>
    </div>
  </div>
</div>

我试过使用 flexbox 并将水井放在那里，这似乎有效，直到我放大并注意到它不再响应并与其他内容重叠。

在不添加不必要的空白并保持响应能力的情况下，在页面左侧和右侧添加井的最佳和最有效的方法是什么？

Answer 1

您可以尝试使用下面的示例来获得相同的使用 col-xx-offset-xx bootstrap 的类

我发布了一个工作示例

您可以使用 container-fluid 而不是 container。

.box {
  border: 1px solid;
  width: 100%;
  height: 100px;
  margin: 0px 0px 10px 0px;
}

   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-lg-2 col-md-2">
      <div class="box">
      </div>
    </div>
    <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
      <div class="box">
      </div>
    </div>
    <div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
      <div class="box">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-2 col-md-2">
      <div class="box">
      </div>
    </div>
    <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
      <div class="box">
      </div>
    </div>
    <div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
      <div class="box">
      </div>
    </div>
  </div>
</div>

工作代码笔 - codepen