使用 Twitter Bootstrap 的 HTML 布局

Question

我正在尝试在 Twitter Bootstrap 中获得两列，左侧导航栏和右侧我的新闻。现在我的第一篇新闻贴在正确的位置，但我的第二篇新闻贴在导航栏下。你可以在这里看到它: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>

Answer 1

显然，您可以使用 Bootstrap 响应式 css 轻松完成此操作，因此我已经通过将容器行替换为以下内容来修复此问题:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>