html - 如何在 bootstrap 3 中创建一个没有填充的充满整个屏幕的容器？

Question

我有以下 div:

<div style="background:red;width:100%;height:100%">Red</div>

当我将它粘贴到没有容器 div 的页面时，我可以看到它。但是当我把它放进容器里时

<div class="container">
    <div style="background:red;width:100%;height:100%">Red</div>
</div>

我根本看不到那个 div。当我把它贴到一个额外的地方时:

<div class="row">
  <div class="span3">
        <div style="background:red;width:100%;height:100%">Red</div>
  </div>
</div>

我能看到它，但周围有很多填充和大量间距。如何创建一个没有任何边距/填充等等于 0 的容器 div？

Answer 1

事实上，如果您使用的是 Bootstrap 网格系统，则会添加一些边距和填充以保持列和页面边界之间的间距。所以对你的问题的直接回答是:不，你不能。

但是，您可以简单地拥有一个不包含在带有 .container 类的 div 中的 div - 那么您的 div 将没有任何从网格系统派生的边距和填充。

<div class="container">
   <div class="row">
     <div class="col-md-8">8-units column</div>
   </div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
  <div class="row">
    Another div within grid system
  </div>
</div>