0

我正在使用 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>
4

1 回答 1

2

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 未正确关闭。代替它的结束标签，有一个多余的行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>
于 2012-07-10T16:54:53.327 回答