0

我试图在 Twitter 引导程序中获得两列，左侧导航和右侧我的新闻。现在我的第一篇新闻帖子在正确的位置，但我的第二篇新闻帖子在导航下方。你可以在这里看到它：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

显然，您可以使用 bootstrap-responsive 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 回答