Question

我想像这个链接创建布局：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

我希望我的解释很好解释，请帮助我：）

Answer 1

如果你看到.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>

<强> Updated Fiddle

Answer 2

将此添加到您的身体CSS

overflow: hidden;

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

Answer 3

对于那些需要将图像放在页面之外的人...使用以下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">

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

3 个答案: