bootstrap3中的水平滚动问题答案

【问题标题】：Horizontal scroll problems in bootstrap3bootstrap3中的水平滚动问题
【发布时间】：2013-09-21 01:45:38
【问题描述】：

请帮我删除带有“col-*”类的 bootstrap3 的水平滚动条。此代码不再起作用 .row{margin-left:0;margin-right:0}

这是我的 html 标记

    <!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="dist/css/style.css" rel="stylesheet/less" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
      <script src="assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>



     <div class="row">
       <div class="col-lg-12">
         <div class="jumbotron">
          <div class="container">
            <h1>Hello, world!</h1>
            <p>...</p>
            <p><a class="btn btn-primary btn-lg">Learn more</a></p>
          </div>
        </div>
       </div>
     </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dist/js/bootstrap.js"></script>
    <script src="assets/js/less.js"></script>
  </body>
</html>

这是css代码

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-style: normal;
    vertical-align: baseline;
    outline:0;
}
h1,h2,h3,h4,h5{
font-weight: normal;    
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

【问题讨论】：

你能发送一些代码吗...否则，对我来说，即使使用 'col-' 也一切正常...
这有什么问题？
从 bootstrap3 开始应该是 .row { margin-right: -15px; margin-left: -15px;} 不知道你在哪里找到上面的 css
最新升级版bootstrap3不支持。如果你下载它，你会看到。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您只是稍微弄乱了 div 标签的层次结构。

您需要将.row 包裹在.container 中，而不是相反。在容器周围包裹.jumbotron（或任何其他您想要全宽作为背景的自定义类）：

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1>Hello, world!</h1>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg">Learn more</a></p>
      </div>
    </div>
  </div>         
</div>

JSFiddle：http://jsfiddle.net/YdRd2/7/

当您在此处发布问题时，请尝试包含一个显示您的问题的 JSFiddle（尽可能孤立）。 Fork 这个小提琴在这里已经包含 Bootstrap：http://jsfiddle.net/SjfzQ/

希望这会有所帮助。

编辑：忘了提到在这种情况下，您甚至都不需要该行，因为您只是全宽：

<div class="jumbotron">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a class="btn btn-primary btn-lg">Learn more</a></p>
  </div>         
</div>

JSFiddle：http://jsfiddle.net/YdRd2/8/

【讨论】：

谢谢它有效。但是从语义方面来说有点错误，因为我们的列容器是“col”，而类容器只是使内容居中，所以将 col 放在容器中是不对的。
@DavidKhasikyan：查看这个例子的源代码：getbootstrap.com/examples/jumbotron 你会发现我上面列出的两种模式都用在这个例子中，而且完全一样。