css - 无法获取页面最右侧的内容

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

Bootstrap 网格系统使用 12 列，这意味着在您设计的每一行中，最顶层行内的列总和应等于 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 未正确关闭。有一个多余的 row div，而不是它的结束标记。
2. 最高层的列总和为 14 (span8 + span6)，这太多了。
3. 两个嵌套列 span3 未在另一行 中关闭。

这是固定版本，我将右列缩小为 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>