1

请帮我删除带有“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;
}
4

1 回答 1

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>

JSF中： //jsfiddle.net/YdRd2/7/

当您在此处发布问题时，请尝试包含一个显示您的问题的 JSFiddle（尽可能孤立）。Fork this fiddle here 以使 Bootstrap 已包含在内： //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/

于 2013-09-18T18:32:15.400 回答