Question

尝试Bootstrap 3.

2列，但它们不在排水沟之间。

    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 box">
        <div>
          <h3 class="green size-16">Test</h3>
        </div><!--first stack-->
        <div class="col-md-12">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tellus cursus, porttitor nisi vitae, laoreet metus. Pellentesque felis sapien, ullamcorper vel massa vel, pharetra efficitur diam.
        </div><!--second stack-->
      </div><!--first box-->
      <div class="col-xs-12 col-sm-6 col-md-6 box">
        <div>
          <h3 class="green size-16">Test</h3>
        </div><!--first stack-->
        <div class="col-md-12">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tellus cursus, porttitor nisi vitae, laoreet metus. Pellentesque felis sapien, ullamcorper vel massa vel, pharetra efficitur diam.
        </div><!--second stack-->
      </div><!--second box-->
</div>

头部的Bootstrap css和身体底部的js。我确实看到了检查元素上显示的填充，但是所有的盒子都粘在一起，所以它看起来像一个盒子里的所有盒子。

我可能忽略了什么，但我在jsfiddle上进行了测试，结果表明它工作正常。奇怪的是，在html文件中，它并没有正常工作。

帮助赞赏

还有一件事 即使对css：margin：15px的作弊添加，col-md-4框也会变为2列而不是3列。是因为包装器的最大宽度：1200px？

Answer 1

实际上，这是正确的，它是如何设计Bootstrap的。 填充会影响网格div中的内容，而不会影响div本身。我已经调整了你的例子并制作了一个bootply（我的首选工具 - 抱歉）http://www.bootply.com/8hj7p5Engy。

内容很好＆＃34; guttered＆＃34;并且填充远离邻居内容，但是当您向div添加背景或边框时，它会向外看。

如果您要在内容周围寻找有边框或有色容器，您应该考虑使用Bootstrap .well或.panel

Bootstrap Gutters似乎不起作用

1 个答案: