0

Twitter のブートストラップで、左のナビゲーションと右のニュースの 2 つの列を取得しようとしています。これで、最初のニュース投稿は適切な場所にありますが、2 つ目のニュース投稿はナビゲーションの下に表示されます。ここで確認できます: http://i.stack.imgur.com/HQnHV.png

HTML:

<div class="container">


        <div class="row">
          <div class="span4 leftsidebar"><!--SPAN4-->
            <div class="navigation">
              <ul>
                <li><a href='#'>Nieuws</a></li>
                <li><a href='#'>Duiken</a></li>
                <li><a href='#'>Duikplaatsen</a></li>
                <li><a href='#'>Duikverslagen</a></li>
                <li><a href='#'>Forum</a></li>
                <li><a href='#'>Galerij</a></li>
                <li><a href='#'>FAQ</a></li>
                <li><a href='#'>Contact</a></li>
              </ul>
            </div>
          </div><!--/SPAN4-->
          <div class='row'>
            <div class='span4'>
              <p>Titel</p>
            </div>
            <div class='span4'>
              <p>Lorem ipsum Excepteur nostrud pariatur minim esse dolore anim est eu eiusmod esse cillum irure in aliqua ut minim dolor fugiat irure laborum culpa labore dolore ad ut nostrud magna deserunt pariatur est non est pariatur anim laboris consectetur commodo ut do voluptate quis dolore sunt incididunt velit magna veniam deserunt exercitation nisi ad dolore deserunt proident ut laboris quis officia proident tempor dolor sint id ad Excepteur sed Excepteur occaecat Duis ut sed cillum sunt fugiat fugiat do enim nulla ut dolore sint incididunt magna eiusmod quis consequat nisi consequat dolor in Excepteur ut adipisicing occaecat occaecat esse aliqua ullamco ea non anim anim dolore nulla ea ullamco aliqua occaecat adipisicing deserunt dolore esse fugiat sunt dolor ut quis enim voluptate labore occaecat amet pariatur culpa sit id amet irure cupidatat in enim commodo cupidatat et ut irure enim laborum fugiat consequat dolor dolore laborum eu commodo aliquip in ea Duis consequat dolore sunt nisi quis aute ullamco consectetur nostrud in dolore sit deserunt dolore sint cillum dolor ut dolor est aliqua adipisicing labore voluptate deserunt cillum sed nostrud pariatur aliqua consectetur amet culpa aliqua elit cillum quis dolore deserunt consectetur aliqua ut. </p>
            </div>

          </div>
          <div class='row'>
            <div class='span4'>
              <p>Titel</p>
            </div>
            <div class='span4'>
              <p>Lorem ipsum Excepteur nostrud pariatur minim esse dolore anim est eu eiusmod esse cillum irure in aliqua ut minim dolor fugiat irure laborum culpa labore dolore ad ut nostrud magna deserunt pariatur est non est pariatur anim laboris consectetur commodo ut do voluptate quis dolore sunt incididunt velit magna veniam deserunt exercitation nisi ad dolore deserunt proident ut laboris quis officia proident tempor dolor sint id ad Excepteur sed Excepteur occaecat Duis ut sed cillum sunt fugiat fugiat do enim nulla ut dolore sint incididunt magna eiusmod quis consequat nisi consequat dolor in Excepteur ut adipisicing occaecat occaecat esse aliqua ullamco ea non anim anim dolore nulla ea ullamco aliqua occaecat adipisicing deserunt dolore esse fugiat sunt dolor ut quis enim voluptate labore occaecat amet pariatur culpa sit id amet irure cupidatat in enim commodo cupidatat et ut irure enim laborum fugiat consequat dolor dolore laborum eu commodo aliquip in ea Duis consequat dolore sunt nisi quis aute ullamco consectetur nostrud in dolore sit deserunt dolore sint cillum dolor ut dolor est aliqua adipisicing labore voluptate deserunt cillum sed nostrud pariatur aliqua consectetur amet culpa aliqua elit cillum quis dolore deserunt consectetur aliqua ut. </p>
            </div>

          </div>


        </div><!--/ROW-->
      </div>
4

1 に答える 1

2

明らかに、これはブートストラップ対応の css で簡単に実現できるため、コンテナーの行を次のように置き換えるだけで、既にこれを修正しています。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>
于 2012-06-17T13:53:21.517 に答える