Question

我正在使用Twitter Boostrap及其随附的网格系统。对于我的#stories div，我想将它移到页面右侧，这样它就可以垂直平行于＃34; welcome＆＃34;格。

我已经遵循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个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>

有几个错误。

span8 div未正确关闭。而不是它的结束标记，有一个冗余的行 div。
最高级别的列总数为14（ span8 + span6 ），这太多了。
两个嵌套列 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>

无法获取最右侧的内容

1 个答案: