文章/答案/技术大牛

发布

社区首页 >问答首页 >非流体容器&背景颜色为流体的行

问非流体容器&背景颜色为流体的行
EN

Stack Overflow用户

提问于 2016-05-19 02:51:26

回答 2查看 520关注 0票数 0

很多关于如何在容器内嵌套容器的答案--流体是个坏主意。因此，如果不这样做，我如何使我的非流体行的背景色占据整个屏幕的宽度？

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

html

css

twitter-bootstrap

bootstrap-modal

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-05-19 03:07:22

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

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

票数 1

Stack Overflow用户

发布于 2016-05-19 02:58:16

就像这样也许

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

<body>

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37313156

复制

相似问题

问非流体容器&背景颜色为流体的行
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问非流体容器&背景颜色为流体的行EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问非流体容器&背景颜色为流体的行
EN