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

我想创建这样的布局链接: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>

JSFiddle

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

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

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

这就是为什么要创建水平条，因为上面的属性占用了更多的空间。

因此，我们将.row类包装在具有以下属性的.container中:

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

因此，这等于空白，你就不会再看到水平滚动条了。

所以，你的HTML应该是这样的:

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

更新小提琴

添加到body CSS

overflow: hidden;

这里是更新后的小提琴http://jsfiddle.net/m7xQy/10/

对于那些需要在页面上放置图像的人…使用这些css代码:

body {
    overflow-x: hidden;
}
#id-your-image {
    position: absolute;
    z-index: 1; /* (or use -1 to put the img behind the layout */
    margin-left: 70%; /* (ajust the %) */
}

现在在移动设备中，在头部标签中使用:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

相关内容

最新更新

热门标签：