twitter-bootstrap 如何从 HTML 页面中删除长水平滚动条
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14514478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove long horizontal scrollbar from HTML page
提问by dextervip
I am starting one project using twitter bootstrap, however I got one issue. There is a long empty scrollbar horizontally. I can't find the problem, does anyone knows whats the problem?
我正在使用 twitter bootstrap 启动一个项目,但是我遇到了一个问题。水平方向有一个长长的空滚动条。我找不到问题,有人知道是什么问题吗?
Thanks
谢谢
回答by Samuel Liew
<style>
body {
overflow-x: hidden !important;
}
body > * {
max-width: 100% !important;
}
</style>
回答by Jonathan de M.
media="all"
style.css:1@media (min-width: 1200px)
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1270px;
}
change to
改成
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width:auto;
}
Or remove the containerclass on your map on bottom, containeris used to wrap the content and shouldn't be wrapped into an other container. Also container will take full width.
或者删除container底部地图上的类,container用于包装内容,不应包装到其他container. 容器也将占据全宽。
Place one anywhere within a
.container, which sets the width of your site and content.
将一个放在 a 中的任意位置
.container,这将设置您的站点和内容的宽度。
'bootstrap doc'
'引导文档'
Check out the templates
查看模板
回答by Surinder ツ
Hope this helps !!
希望这可以帮助 !!
1) Add the following in header to enable responsive feature
1)在标题中添加以下内容以启用响应功能
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2) If you are using Container fluid
2) 如果您使用的是容器流体
make proper use of row-fluidand spanlike:
正确使用row-fluid和span喜欢:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
there may be some tag error here ..
这里可能有一些标签错误..
3) forgot to add overflow-x hidden to body.
3) 忘记在正文中添加隐藏的溢出-x。
body {
overflow-x: hidden;
}

