Html 引导-带间距的列

我正在尝试使用引导在一行中创建四列。柱子之间应该有一定的间距。请检查图像。有人能告诉我如何创建像图中所示的页面吗？

使用引导：

<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>

第一区
第2区
第3区
第4区

---

在每个块中，您可以将列内容放入下面的注释中，您所需的框宽为344px，4*344=1376，这不适合较小尺寸的引导网格系统，因此将换行，因此您需要使用例如：

HTML

否则，引导方式：

给定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>

---

演示更新了引导：

您可以使用以下代码：

<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>

---

或者，如果没有提供足够的檐槽，则每行可以是

class=“col-xs-2 col-xs-offset-1”

我是否必须将上述内容包含在感谢中。我想使用高度：170px和宽度：344px。如果我使用width:344px，则所有div都被包装并显示为单个div。如果我使用width:100%，则列是分开的。4*344=1376，这不适用于较小尺寸的引导网格系统，因此，我们将总结上面提供的新示例-请注意，理想情况下，您应该在问题中列出您的所有约束条件，以确保提供的答案尽可能合适。在这种情况下，我不能使用宽度：344px。是否有其他wap使用宽度344px.ok。如何在左侧显示图像，在右侧显示日期。我用的是浮动：左。如果我显示

在图像之后，内的文本不会显示在下一行。在您的代码中，第二行显示时没有任何空格。第二行上方的空格？在我的屏幕空间中有..：（如果你想给第二行增加更多的空间，你可以给它加上页边空白。如何减少列之间的空间？

<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>

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

<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>

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