无法获取内容到页面最右侧

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>