Question

请帮我删除bootstrap3的水平滚动条，它附带类“col- *”。此代码不再起作用 .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;
}

Answer 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（尽可能隔离）。把这个小提琴放在这里以包含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/

bootstrap3中的水平滚动问题

1 个答案: