在所有浏览器中，网站的宽度不是 100% 全宽

Question

我的网站的宽度不是 100% 的全浏览器宽度。我正在使用 Twitter Bootstrap 3.1 并在没有模板的情况下对网站进行了手工编码：

网站上线www.getcitylights.com

这是我为 body 和一个子元素 (welcometop) 提供的 CSS，它是顶部的蓝色 div：

  * { margin: 0; padding: 0; }


  html, body {
                min-width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
              }


         .welcometop {
                margin:0;
                min-height:210px;
                max-height:auto;
                background: #1542bd;    
                     }

如果您向右滚动，您会看到所有子元素在 Chrome 桌面版和移动版中都不是完整的浏览器宽度。

我该如何解决这个问题？

谢谢！

Answer 1

问题

这是 Bootstrap 的 .row 类中的 margin-right:-15px; 应用于 #firststop 标头中的 <div> 导致此问题。

解决方案

如果您在使用 Bootstrap 的 row 类时不会错过应用于此元素的额外 margin-left，只需从元素中删除该类即可。

如果您希望应用margin-left，而不是不需要的margin-right，请不要将.row 类应用于此元素并使用您自己的选择器，例如：

<div id="example"> 而不是<div class="row">

在你自己的 custom.css 样式表中：

#example { margin-left:-15px; }