简体   繁体   中英

HTML Layout using Twitter Bootstrap

I'm trying to get two columns in Twitter bootstrap, left navigation and on the right my news. Now my first news post is on the right spot but my second news post comes under the navigation. You can see it here: 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>

Apparently you can easily accomplish this with the bootstrap-responsive css, therefore I already fixed this just by replacing the container en rows with this:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM