My Bootstrap列沒有排隊

我曾經有一個標題，側導航欄，主要大型內容列和頁腳的工作佈局。現在，導航列位於內容列的頂部，即使數字應該加起來。我只需要我的導航欄旁邊排列我的內容。你可以看到我的WIP HERE。我究竟做錯了什麼？My Bootstrap列沒有排隊

這基本上就是我對我的佈局代碼：

<div class="container"> 
    <div class="row"> 
     <div class="page-header"> 
      <p>HEADER</p> 
     </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-2 col-md-2 hidden-sm hidden-xs"> 
      <p>NAVIGATION</p> 
     </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-10 col-md-10 col-sm-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0"> 
      <p>CONTENT</p> 
     </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="page-footer"> 
      <p>FOOTER</p> 
     </div> 
    </div> 
</div>

你的幫助是極大的讚賞。謝謝！ :)

來源

2014-07-23 mortalpoet

的作品！儘管我不得不從內容div中刪除偏移類。十分感謝你的幫助！ :) – mortalpoet

列的div只排隊對方身旁的div實際上是「兄弟姐妹」給對方，除了加起來numberwise。

嘗試把導航和內容列在同一容器 - >行標籤，就像這樣：

<div class="container"> 
    <div class="row"> 

     <div class="col-lg-2 col-md-2 hidden-sm hidden-xs"> 
      <p>NAVIGATION</p> 
     </div> 

     <div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0"> 
      <p>CONTENT</p> 
     </div> 

    </div> 
</div>

來源

2014-07-23 13:54:18 Chipowski

哦，正如你在你的問題的評論中指出的那樣，還有一個偏移類也會影響佈局。一開始沒有注意到它。 – Chipowski

從您的代碼的外觀看來，它看起來像你希望你的列彼此相鄰。這應該工作

<div class="container"> 
    <div class="row"> 
    <div class="page-header"> 
     <p>HEADER</p> 
    </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-2 col-md-2 hidden-sm hidden-xs"> 
     <p>NAVIGATION</p> 
    </div> 
    <div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0"> 
     <p>CONTENT</p> 
    </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
    <div class="page-footer"> 
     <p>FOOTER</p> 
    </div> 
    </div> 
</div>

來源

2014-07-23 13:54:08 Andrew

謝謝你的迴應。不幸的是，這是行不通的。現在這些列互相交錯排列。你可以看到這個[這裏]（http：//www.http：//jessejaymesjones.com/NEW_VERSION/index_v05.html）任何建議？我很感激！ :) – mortalpoet

My Bootstrap列沒有排隊

回答

相關問題