Question

我有一个基于bootstrap 3的Web布局。Here是一个JSFiddle。为了使布局能够响应，我不得不采用一种稍微笨拙的结构（不包括该功能，但代码确实需要以这种方式构建）。所有小尺寸屏幕的最终结果是三个信息框，每个信息框占用4列，宽度为80％。我不得不像这样构造盒子以允许一些响应功能。无论如何，如何增加盒子之间的空白填充？

<div class="container PageViews">
  <div class="row Page2 text-center">
    <div class="col-sm-4 padded">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span> </div>
    </div>
    <div class="col-sm-4">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span> </div>
    </div>
    <div class="col-sm-4">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span> </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h3>Title 1</h3>
          </div>
          <div class="col-xs-6 col-sm-12 eqheight1">
            <p class>Text 1 </p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h3>Title 2</h3>
          </div>
          <div class="col-xs-6 col-sm-12 eqheight2">
            <p>Text 2</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h3>Title 3</h3>
          </div>
          <div class="col-xs-6 col-sm-12 eqheight3">
            <p>Text 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.Page2 > *:nth-child(-n+3) {
  border-bottom: 0;
  padding-top: 10px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.Page2 > *:nth-last-child(-n+3) {
  border-top: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-bottom: 2em;
}

.Page2 > * {
  border: 5px solid white;
  background: #3DBEAF;
}

Answer 1

Bootstrap使用网格系统，每行由12列组成。如果您希望在框之间添加更多填充，则必须使用更少的列。您应该将col-sm-4更改为col-sm-3。

您希望增加框之间的margin而不是填充。

我编辑了你的jsfiddle，这一行增加了框之间的空白

.Page2 > *:nth-child(-n+3) {
  border-bottom: 0;
  padding-top: 10px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.Page2 > *:nth-last-child(-n+3) {
  border-top: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-bottom: 2em;
}

.Page2 > * {
  border: 5px solid white;
  background: #3DBEAF;
}

.col-sm-3 {
 margin-right: 8%;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container PageViews">
  <div class="row Page2 text-center">
    <div class="col-sm-3 padded">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span> </div>
    </div>
    <div class="col-sm-3">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span> </div>
    </div>
    <div class="col-sm-3">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span> </div>
    </div>
    <div class="col-sm-3">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h3>Title 1</h3>
          </div>
          <div class="col-xs-6 col-sm-12 eqheight1">
            <p class>Text 1 </p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h3>Title 2</h3>
          </div>
          <div class="col-xs-6 col-sm-12 eqheight2">
            <p>Text 2</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h3>Title 3</h3>
          </div>
          <div class="col-xs-6 col-sm-12 eqheight3">
            <p>Text 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

点击整页查看结果。

在引导列之间添加间距

1 个答案: