無法獲取內容到頁面最右側

Question

我正在使用Twitter Boostrap以及隨附的網格系統。 對於我的#stories div，我想將它移動到頁面的右側，以便它垂直平行於「歡迎」div。

我已經按照Boostrap參考（腳手架部分）中的嵌套規則，根據他們的指南展示了我的代碼，但無法獲得故事div的內容，以顯示爲右側的列。

有人可以告訴我我可能會做錯什麼嗎？

下面的代碼，但也是一個鏈接在底部的整個頁面。

<div class="row"> 



     <!-- welcome container --> 
     <div class="span8" id="welcome"> 
      <h1>Storify</h1> 
      <div id="StoryActions"> 

      <div> 

       <a href="#" class="btn btn-success .btn-large" id="BtnCreateStory"> 
        <div id="NewStoryBtn"> 
         <span id="create">CREATE</span><p id="newstory">New Story</p> 
        </div> 
       </a> 



       <a href="#" class="btn" id="BtnJoin"> 
        <div id="JoinStoryBtn"> 
         <span id="create">JOIN</span><p id="newstory">Existing Story</p> 
        </div> 
       </a> 

       <p id="registration">no registration required</p> 



       <div id="StoryDescription"> 
       <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> 
       <p>Storify is a <strong>fun</strong>, group <strong>writing game</strong> 
       taking inspiration from the story writing game that you may have played at a party or at school with friends.</p> 

       <p>Each person writes a random sentence to form part of a story.</p> 

       <p>Once the story is complete, one person reads out the whole story, and usually everyone breaks into laughter.</p> 
       <p>Storify is great for playing with your Internet friends or Co-workers.</p> 
       </div> 

      </div> 

      </div> 

    <div class="row"> 

     <div class="span6"> 

       <!-- Running Stories --> 
       <div class="span3">&nbsp;</div> 

       <div class="span3"> 
        <div id="stories"> 
        I want to write a really long story here and see how far it goes down the path 
        </div> 
       </div> 

     </div> 


    </div> 

Answer 1

引導程序網格系統利用12個cloumns，這意味着，在每行您設計，內部行的列的總和在最上層應等於12或更小。嵌套行中列的總數應該等於嵌套行的列的大小。

您的示例的簡化方案是這樣的：

<div class="row"> 
    <!-- welcome container --> 
    <div class="span8" id="welcome"> 
    ... 
    <div class="row"> 
    <div class="span6"> 
    <!-- Running Stories --> 
     <div class="span3">&nbsp;</div> 

     <div class="span3"> 
     <div id="stories"> 
      I want to write a really long story here and see how far it goes down the path 
     </div> 
     </div> 
    </div> 
</div> 

有幾個錯誤。

1. span8 div未正確關閉。而不是它的結束標記，有一個多餘的行 div。
2. 最高級別的列總和爲14（span8 + span6），這太多了。
3. 兩個嵌套列span3未在另一個行中關閉。

這裏是固定的版本，其中，I具有降低的右列span4所以總和將等於12同樣我已經減少了列嵌套的尺寸。

<div class="container"> 

    <div class="row"> 

     <!-- welcome container --> 
     <div class="span8" id="welcome"> 
      <h1>Storify</h1> 
      <div id="StoryActions"> 

      <div> 

       <a href="#" class="btn btn-success .btn-large" id="BtnCreateStory"> 
        <div id="NewStoryBtn"> 
         <span id="create">CREATE</span><p id="newstory">New Story</p> 
        </div> 
       </a> 



       <a href="#" class="btn" id="BtnJoin"> 
        <div id="JoinStoryBtn"> 
         <span id="create">JOIN</span><p id="newstory">Existing Story</p> 
        </div> 
       </a> 

       <p id="registration">no registration required</p> 



       <div id="StoryDescription"> 
       <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> 
       <p>Storify is a <strong>fun</strong>, group <strong>writing game</strong> 
       taking inspiration from the story writing game that you may have played at a party or at school with friends.</p> 

       <p>Each person writes a random sentence to form part of a story.</p> 

       <p>Once the story is complete, one person reads out the whole story, and usually everyone breaks into laughter.</p> 
       <p>Storify is great for playing with your Internet friends or Co-workers.</p> 
       </div> 

      </div> 

      </div> 

     </div> 

     <div class="span4"> 

      <div class="row"> 
       <!-- Running Stories --> 
       <div class="span2">&nbsp;</div> 

       <div class="span2"> 
        <div id="stories"> 
        I want to write a really long story here and see how far it goes down the path 
        </div> 
       </div> 
      </div> 
     </div> 

</div>