0

I have the following simple html page. It should display Col1 to Col4 horizontally next to each other, but Col4 is in a below the others. Why? And how can I solve it?

I'm using 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>
4

1 回答 1

1

Since you're trying to nest grid elements you need to specify the .row container as a child of your grid element container, this way your grid elements can properly align. The way you have it now the .row class won't be able to remove the extra gutter space it eliminates with a negative margin to fit all the columns within your container. You can read more about it here under the Nesting columns section.

Fixed markup:

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