0

次の単純な html ページがあります。Col1 から Col4 を横に並べて表示する必要がありますが、Col4 は他の下にあります。なんで？どうすれば解決できますか？

ブートストラップ 2.2.2 を使用しています

<html>
  <head>
    <!-- Bootstrap -->
    <link media="screen" rel="stylesheet" href="http://localhost:9000/assets/stylesheets/bootstrap.min.css">  
  </head>
  <body>    
    <div class="container">
      <div class="row">
        <div class="span6 row">
          <div class="span1">Col1</div>
          <div class="span1">Col2</div>
          <div class="span1">Col3</div>
          <div class="span3">Col4</div>
        </div>
        <div class="span6 row">

        </div>
      </div>
    </div>
    <script src="http://localhost:9000/assets/javascripts/bootstrap.min.js"></script>  
  </body>
</html>
4

1 に答える 1

1

グリッド要素をネストしようとしているので、.rowコンテナーをグリッド要素コンテナーの子として指定する必要があります。これにより、グリッド要素を適切に整列させることができます。現在の方法では、.rowクラスは余分なガタースペースを削除できず、コンテナー内のすべての列に収まるように負のマージンで排除されます。詳細については、こちらの列のネストセクションを参照してください。

固定マークアップ:

<html>
  <head>
    <!-- Bootstrap -->
    <link media="screen" rel="stylesheet" href="http://localhost:9000/assets/stylesheets/bootstrap.min.css">  
  </head>
  <body>    
    <div class="container">
      <div class="row">
        <div class="span6">
            <div class="row">
              <div class="span1">Col1</div>
              <div class="span1">Col2</div>
              <div class="span1">Col3</div>
              <div class="span3">Col4</div>
            </div>
        </div>
        <div class="span6">
            <div class="row">
            </div>
        </div>
      </div>
    </div>
    <script src="http://localhost:9000/assets/javascripts/bootstrap.min.js"></script>  
  </body>
</html>
于 2012-12-17T00:58:28.107 に答える