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>

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/

于 2013-09-18T18:32:15.400 に答える