0

I'm using Twitter Boostrap and the grid system that comes with it. For my #stories div, i want to move it to the right of the page so it's vertically parallel to the "welcome" div.

I've followed the nesting rules in the Boostrap reference (scaffolding section) and laid out my code based on their guide, but cant get the content for the stories div to appear as a column on the right.

What I might be doing wrong?

Code below, but also a link at the bottom to the full page.

<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. span8divが正しく閉じられていません。終了タグの代わりに、冗長な行divがあります。
  2. 最上位レベルの列の合計は14（span8 + span6）であり、多すぎます。
  3. ネストされた2つの列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 に答える