Bootstrap - 背景颜色为流体的非流体容器和行答案

【问题标题】：Bootstrap - Non-Fluid Container & Row Where Background Colour is FluidBootstrap - 背景颜色为流体的非流体容器和行
【发布时间】：2016-05-19 19:45:34
【问题描述】：

很多关于如何将容器嵌套在容器流体中的答案是一个坏主意。那么如果不这样做，我如何让我的非流动行的背景颜色占据整个屏幕的宽度？

你可以看到 Bootstrap 在他们自己的网站上用紫色显示，但查看源代码对我没有帮助。有什么想法吗？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-modal

【解决方案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   
}

更新

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

如果您需要交替使用全宽背景颜色的行，则为您的页面使用容器流体会更干净，然后在每行上使用嵌套容器：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:
}

【讨论】：

这很好，但是对于交替的行背景颜色，必须为每一行使用 wrap -> container -> row。这是必须的还是有更好的方法？
谢谢@BFalcon 这是给你的另一个变体：codepen.io/panchroma/pen/LNKrRG

【解决方案2】：

可能是这样的

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

<body>

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

【讨论】：