Question

我有以下简单的html页面。它应该将Col1显示为Col4至Col4彼此相邻，但Col4位于其他位置之下。为什么？我该如何解决？

我正在使用bootstrap 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>

Answer 1

由于您尝试嵌套网格元素，因此需要将.row容器指定为网格元素容器的子容器，这样您的网格元素就可以正确对齐。你现在拥有它的方式.row类将无法移除它消除的额外装订线空间，并带有负边距以适合容器中的所有列。您可以在嵌套列部分下阅读有关here的更多信息。

固定标记：

<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>

Twitter Bootstrap：网格系统浮动

1 个答案: