Bootstrap - 间距列

Question

我正在尝试使用bootstrap连续创建四列。列之间应该有一些间距。请检查图像。谁能告诉我如何创建一个像图像中看到的页面？

Answer 1

在下面的评论中，你想要的盒子宽度为344px，4 * 344 = 1376，这不适合较小尺寸的自举网格系统，因此将包装，因此你需要使用例如：

Demo Fiddle

HTML

<div class='wrapper'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.wrapper {
    white-space:nowrap;
    text-align:center;
}
.wrapper div {
    display:inline-block;
    background:lightblue;
    margin:5px;
    height:200px;
    width:344px;
}

否则引导方式：

Demo Field

鉴于HTML：

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <div></div>
        </div>
        <div class="col-xs-3">
            <div></div>
        </div>
        <div class="col-xs-3">
            <div></div>
        </div>
        <div class="col-xs-3">
            <div></div>
        </div>
    </div>
</div>

您可以使用CSS（应该整理）

[class*=col] div {
    background:lightblue;
    margin:5px;
    height:200px;
}

Answer 2

DEMO 更新 bootply：http://www.bootply.com/T8BDlFLpRD

您可以使用此代码：

<div class="container">
  <div class="row">
      <div class="col-md-3">
        <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
      </div>
    <div class="col-md-3">
            <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
    <div class="col-md-3">
          <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
    <div class="col-md-3">
          <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
  </div>
  <div class="row">
      <div class="col-md-3">
        <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
      </div>
    <div class="col-md-3">
            <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
    <div class="col-md-3">
          <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
    <div class="col-md-3">
          <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
  </div>
</div>

<强> CSS

body
{ 
  background:orange; 
}
.col-md-3{
  height:200px;
  padding-top:25px;
}

Answer 3

使用bootstrap：

<div class="row">
    <div class="col-xs-3">block 1</div>
    <div class="col-xs-3">block 2</div>
    <div class="col-xs-3">block 3</div>
    <div class="col-xs-3">block 4</div>
</div>

在每个区块内，您可以添加列内容