twitter引导布局问题

时间:2012-08-29 11:41:08

标签: html twitter-bootstrap

开始这是我的第一个问题并访问stackoverflow,这将是我第一次尝试编写实际的东西。

我在使用twitter bootstrap时遇到了麻烦!

我不知道为什么第二行只有一个段落。

我无法上传页面的屏幕截图,我该怎么办?

这是我的代码:

<div class="container">

  <!-- Main hero unit for a primary marketing message or call to action -->
  <div class="hero-unit">
    <h1>Hello, world!</h1>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
  </div>

  <!-- Example row of columns -->
  <div class="row">
    <div class="span4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
   </div>
    <div class="span4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div><!-- end row 1 -->

  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div><! -- end row 2 -->

  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div><!-- end row 2 --> 
  <hr>

2 个答案:

答案 0 :(得分:0)

因为这正是你所要求的:

<!-- Example row of columns -->
<div class="row">
    <div class="span4">
    </div>
    <div class="span4">
    </div>
    <div class="span4">
    </div>
</div><!-- end row 1 -->

<div class="row">
    <div class="span3">
    </div>
</div><! -- end row 2 -->

<div class="row">
    <div class="span3">
    </div>
    <div class="row">
        <div class="span3">
        </div>
        <div class="row">
            <div class="span3">
            </div>
            <div class="row">
                <div class="span3">
                </div>
            </div><!-- end row 2 --> 

另外,你需要更多

</div>

您的困惑来自于您的所有行都相同

为每一行指定一个特定的名称(Header1,header2 ......),您将看到确切的错误

答案 1 :(得分:0)

这是一个简单的问题,实际上你的行数比你想象的要多:

根据事物的声音,您需要两个顶级行(即伸展容器div整个宽度的行)

这是你实际得到的一个精简版本(注意:为清晰起见,我删除了英雄单位和内容):

<div class="container">

  <!-- start of first row -->
  <div class="row">
    <div class="span4">
    </div>
    <div class="span4">
    </div>
    <div class="span4">
    </div>
  </div><!-- end of first row -->

  <!-- start of second row -->
  <div class="row">
    <div class="span3">
    </div>
  </div><!-- IMPORTANT: This closing div actually closes your second row -->

  <!-- start of third row, IMPORTANT: you have failed to close this div -->
  <div class="row">
    <div class="span3">
    </div>
    <!-- start of fourth row, IMPORTANT: you have failed to close this div -->
    <div class="row">
      <div class="span3">
      </div>
      <!-- start of fifth row, IMPORTANT: you have failed to close this div -->
      <div class="row">
        <div class="span3">
        </div>
        <!-- start of sixth row, IMPORTANT: you HAVE closed this div -->
        <div class="row">
          <div class="span3">
          </div>
       </div><!-- you have erroniously identified this closing div as being the end of row 2, when it is actually the end of row 6 --> 
    <!-- IMPORTANT: you fail to close the container in your posted code -->

正如你所看到的,你的div有点混乱了。

重要的是要注意第2行突然结束。如果你想要从第三行开始的东西出现在你的第二行内,那么你需要将代码移动到包含它的div中。

这样的事情:可能会有所帮助:

<div class="container">

  <!-- start of first row -->
  <div class="row">
    <div class="span4">
    </div>
    <div class="span4">
    </div>
    <div class="span4">
    </div>
  </div><!-- end of first row -->

  <!-- start of second row -->
  <div class="row">
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
  </div><!-- end of row 2 -->
</div><!-- IMPORTANT: don't forget to close the  container -->

这将产生两行,第一行包含3个跨度,第二行包含4个。