Question

如何将容器嵌入容器内部的许多答案都是个坏主意。因此，如果不这样做，我如何使非流体行的背景颜色占据整个屏幕的宽度？

你可以看到Bootstrap在紫色的网站上做了这个，但查看源代码对我没有帮助。有什么想法吗？

Answer 1

您可以将容器包装在另一个div中，并将背景颜色应用于此父div。请参阅http://codepen.io/panchroma/pen/aNgvoJ

HTML

<div class="wrap">
   <div class="container">
     <div class="row">bootstrap row</div>
   </div>
</div>

CSS

.wrap{
  background-color:teal   
}

更新

这很好但是对于交替的行背景颜色，必须使用换行 - ＆gt;容器 - ＆gt;每行排？

如果您需要每行都有全宽背景颜色的交替行，那么为页面使用容器流体会更清晰，然后在每行使用嵌套容器：http://codepen.io/panchroma/pen/GZbqLV

<div class="container-fluid">

  <div class="row one">
      <div class="container">
        <div class="row">one</div>
    </div> <!-- end nested container -->
  </div> <!-- end row -->  

  ...  <!-- repeat above for each row -->

  </div> <!-- end parent container -->

CSS

.one{
   background-color:pink:
}

Answer 2

这样的事可能

<style>
        .cont {
            background-color: yellow;
            height: 20em;
            width: 100%;
        }
    </style>
</head>

<body>

    <div class="cont">
        <!-- content -->
    </div>

Bootstrap - 非流体容器＆amp;背景颜色为流体的行

2 个答案: