2016-09-07 86 views
0

我在自舉網格系統有點問題。我在頁面頂部創建了自己的導航div。它適用於較大的屏幕尺寸。當我將屏幕尺寸縮小到xs時,它會中斷。這是我要去的:bootstrap網格系統列在彼此

| logo | link 1 | link 2 | link 3 | link 4| 

以上是針對除xs以外的所有屏幕。對於XS我越來越:

| logo | link 1 | 
|  | link 2 | 
|  | link 3 | 
|  | link 4 | 

而我想要的是:

| logo | 
| link 1 | 
| link 2 | 
| link 3 | 
| link 4 | 

這裏是我的代碼:

<div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-6"> 
      <a href="/"><h1 class="logo">LOGO</h1></a> 
     </div> 
    </div> 
    <div class="row navbar navigation"> 
     <div class="col-xs-12 col-md-6 navLinks"> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links"><a href="videos.html">LINK 1</a></h4> 
      </div> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links"><a href="photos.html">LINK 2</a></h4> 
      </div> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links"><a href="about-us.html">LINK 3</a></h4> 
      </div> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links" id="contactLink"><a>LINK 4</a></h4> 
      </div> 
     </div> 
    </div> 
</div> 

回答

1

加載它作爲一個完整的行刪除。從DIV Class類排排=導航欄

刪除的行標誌部分股利行結束標記,並把它在結束

+0

這個工作,但也有在CSS錯誤。我有一個顯示器:flex; –