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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 16:11:44  来源:igfitidea点击:

How to remove long horizontal scrollbar from HTML page

htmlcsstwitter-bootstrapscrollbarbrowser-scrollbars

提问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-fluidspan喜欢:

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

LINK

关联