出现水平滚动条，行有负边距 [英] horizontal scrollbar appearing, row having negative margin

查看：27
本文介绍了出现水平滚动条，行有负边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

代码:

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

<!-- 身体--><div class="row nav-header"><div class="容器"><div id="switch-btn" class="col-md-3">开关按钮</div><div id="search" class="col-md-9">搜索按钮</div>

<div class="row"><div class="容器"><div id="popular-categories" class="col-md-3"><p>流行类别</p></div><div id="banner-slide" class="col-md-9"><p>横幅幻灯片</p></div>

<!-- 页脚--><div id="页脚"><div class="容器"><div class="row"><div id="term" class="col-md-3">TERM &条件 </div><div id="copyright" class="col-md-3 pull-right">版权</div>

JSFiddle

我希望我的解释解释得很好且易于理解，请帮助我:)

解决方案

如果你看到 .row 类的 css，它有 css 属性:

margin-right: -15px;左边距:-15px；

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

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

padding-right: 15px;左边距:15px；

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

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

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

更新小提琴

I want to create layout like this link:http://deqsastudio.com/projects/screen.png

but the problem horizontal Scrollbar on the bottom not fixed which is keep moving.Like this:

Code:

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

JSFiddle

I hope my explanation explained well and understandable, Please help me on this :)

解决方案

If you see the css of the .row class, it has the css properties:

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

This is why the horizontal bar is being created, because the above properties utilize more space.

For this reason, we wrap the .row class within the .container which has the properties:

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

Thus, this equals out the space and you won't see the horizontal scrollbar anymore.

So, your HTML should look like:

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

Updated Fiddle

这篇关于出现水平滚动条，行有负边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆