html – 如何在没有这个“hack”的情况下在整个屏幕上制作水平条带

概述我正在为一个站点构建一个主题,我想要的行为是主要内容包含在一个具有最大宽度的水平居中的div中,除了偶尔会有彩色背景延伸整个屏幕宽度的行(这个是许多现代网站的外观类型).我也在使用bootstrap,我不知道是否有内置的类来做这类事情.但我一直在做的就像 <div class="container"> <div class="row"> <p>Here's a row that 我正在为一个站点构建一个主题,我想要的行为是主要内容包含在一个具有最大宽度的水平居中的div中,除了偶尔会有彩色背景延伸整个屏幕宽度的行(这个是许多现代网站的外观类型).我也在使用bootstrap,我不知道是否有内置的类来做这类事情.但我一直在做的就像

<div >   <div >       <p>Here's a row that stays contained in the container</p>   </div>   <div >       <div >           <p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>                 </div>   </div/>   <div >       <p>Here's a row that stays contained in the container</p>   </div>   <div >       <div >           <p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>                 </div>   </div></div>

.container { wIDth: 200px; margin: 0 auto; }    .row { padding: 15px 5px; }    .expand-full-wIDth { margin-left: -1000000px; margin-right: -1000000px; background:  yellow; }

(小提琴：http://jsfiddle.net/pjpuLcat/)

但是我想知道是否有更好的方法可以做到这一点因为边缘左边：-somebignumber; margin-right：-somebignumber; “Hack”搞乱了我试图在我的网站中加入的一些第三方项目的结构,包括一个JavaScript轮播.那么有更好的方法吗？

解决方法 你认为拥有巨大的负利润并不是一个好主意.而不是有一个包装所有东西的.container,你应该在每个部分都有.container.

<div >    <div >        <p>Here's a row that stays contained in the container</p>    </div></div><div >    <div >        <p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>              </div></div><div >    <div >        <p>Here's a row that stays contained in the container</p>    </div></div><div >    <div >        <p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>              </div></div>

.container { wIDth: 200px; margin: 0 auto; }    .row { padding: 15px 5px; }    .expand-full-wIDth { background:  yellow; }

Updated fiddle

总结

以上是内存溢出为你收集整理的html – 如何在没有这个“hack”的情况下在整个屏幕上制作水平条带全部内容，希望文章能够帮你解决html – 如何在没有这个“hack”的情况下在整个屏幕上制作水平条带所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。