出现水平滚动条，行有负边距

Question

出现水平滚动条，行有负边距

Red*_*d4x 4 twitter-bootstrap twitter-bootstrap-3

我想像这个链接一样创建布局：http : //deqsastudio.com/projects/screen.png

但是底部水平滚动条的问题没有固定，一直在移动。像这样：

代码：

<body>

<!-- Header -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div id="header" class="row">
            <div id="logo" class="col-md-3">LOGO</div>
            <div id="nav" class="col-md-9">NAV</div>
        </div>
    </div>
</div>

<!-- Body -->
<div class="row nav-header">                
    <div class="container">
        <div id="switch-btn" class="col-md-3">SWITCH BUTTON</div>
        <div id="search" class="col-md-9">SEARCH BUTTON </div>
    </div>
</div>  


<div class="row">
    <div class="container">
        <div id="popular-categories" class="col-md-3 "><p>POPULAR CATEGORIES</p></div>
        <div id="banner-slide" class="col-md-9"><p>BANNER SLIDE</p></div>
    </div>
</div>

</body>

<!-- Footer -->
<div id="footer">
    <div class="container">
        <div class="row">
            <div id="term" class="col-md-3">TERM & CONDITIONS </div>
            <div id="copyright" class="col-md-3 pull-right">COPYRIGHT</div>
        </div>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

JSFiddle

我希望我的解释解释得很好并且可以理解，请帮助我:)

Answer 1

AyB*_*AyB 5

如果您看到.row该类的 css，则它具有 css 属性：

margin-right: -15px;
margin-left: -15px;

Run Code Online (Sandbox Code Playgroud)

这就是创建水平条的原因，因为上述属性利用了更多空间。

出于这个原因，我们将.row类包装在.container具有以下属性的中：

padding-right: 15px;
padding-left: 15px;

Run Code Online (Sandbox Code Playgroud)

因此，这等于空间，您将不再看到水平滚动条。

因此，您的 HTML 应如下所示：

<div class="container">
  <div class="row">...</div>
  <div class="row">...</div>
</div>

Run Code Online (Sandbox Code Playgroud)

更新的小提琴

归档时间：	11 年，7 月前
查看次数：	3599 次
最近记录：	6 年，4 月前