在页面的左侧和右侧显示自举井

时间：2017-06-26 00:22:59

标签： javascript html css twitter-bootstrap

我使用自助井来模拟卡片。我目前有两种不同类型的卡片，＆＃34;普通＆＃34;将在屏幕中间的那些，以及＆＃34;特殊的＆＃34;那些将在左侧和右侧。

模板I我试图复制：

template

问题：

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

2。）不使用绝对定位，制作新的＆＃34;特殊的＆＃34;侧面的卡片会增加额外的垂直空间，使中间内容下沉到页面

＆＃13;
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

2 个答案:

答案 0 :(得分：0)

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

我发布了一个工作示例

您可以使用container-fluid代替container。

＆＃13;
＆＃13; 
.box {
  border: 1px solid;
  width: 100%;
  height: 100px;
  margin: 0px 0px 10px 0px;
}
＆＃13; 
   <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>
＆＃13;
＆＃13;
＆＃13;

工作代码工具 - codepen

答案 1 :(得分：0)

我不知道如何用固定尺寸来做，css很难。

＆＃13;
＆＃13; 
body {
  padding-top: 20px;
}
＆＃13; 
<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="container-fluid">

  <div class="row">
    <div class="col-sm-12">
      <div class="well">header row</div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-3">
      <div class="well">x-well</div>
      <div class="well">x-well</div>
      <div class="well">x-well</div>
      <div class="well">x-well</div>
    </div>
    <div class="col-lg-6">
      <div class="well">
        sample text
      </div>
      <div class="row">
        <div class="col-sm-6">
          <div class="well">x-well</div>
          <div class="well">x-well</div>
          <div class="well">x-well</div>
          <div class="well">x-well</div>
        </div>
        <div class="col-sm-6">
          <div class="well">x-well</div>
          <div class="well">x-well</div>
          <div class="well">x-well</div>
          <div class="well">x-well</div>
        </div>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="well">x-well</div>
      <div class="well">x-well</div>
      <div class="well">x-well</div>
      <div class="well">x-well</div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题