twitter引導佈局問題

Question

開始這是我的第一個問題，並訪問stackoverflow，這將是我第一次嘗試實際嘗試編程的東西。

我有twitter引導的麻煩！

我不知道爲什麼第二行只有一個段落。

我無法上傳頁面的截圖，我該怎麼辦？

這裏是我的代碼：

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

Answer 1

因爲這正是你問：

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

你的困惑來自於以下事實：你所有的行都是一樣的

給各行的具體名稱（頭1，標題2 ...），你會看到什麼是錯的

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