0

开始这是我的第一个问题并访问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>
4

2 回答 2

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 ...），您将确切地看到问题所在

于 2012-08-29T12:11:29.530 回答
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 个。

于 2012-08-29T12:11:47.273 回答