Question

我正在使用twitter bootstrap启动一个项目，但是我遇到了一个问题。水平长的空滚动条。我找不到问题，有谁知道这个问题是什么？

由于

Answer 1

<style>
body {
  overflow-x: hidden !important;
}
body > * {
  max-width: 100% !important;
}
</style>

Answer 2

media="all"
style.css:1@media (min-width: 1200px)

.container, 
.navbar-static-top .container, 
.navbar-fixed-top .container, 
.navbar-fixed-bottom .container {
    width: 1270px;
}

更改为

.container, 
.navbar-static-top .container,
.navbar-fixed-top .container, 
.navbar-fixed-bottom .container {
    width:auto;
}

或者删除地图底部的container课程，container用于包装内容，不应包含在其他container中。容器也将占据全宽。

将其放置在.container内的任意位置，以设置网站和内容的宽度。

' bootstrap doc '

查看the templates

Answer 3

希望这会有所帮助!!

1）在标题中添加以下内容以启用响应功能

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

2）如果您使用的是容器液

正确使用row-fluid和span，如：

<div class="container-fluid">
<div class="row-fluid">
    <div class="span2">
        <!--Sidebar content-->
    </div>
    <div class="span10">
        <!--Body content-->
    </div>
</div>

这里可能有一些标签错误..

3）忘了向身体添加overflow-x hidden。

body {
    overflow-x: hidden;
}

<强> LINK

如何从HTML页面中删除长水平滚动条

3 个答案: