Bootstrap3行跨度

Question

我想做一個佈局，我的標識位於左側，標題和菜單位於標識的右側。當屏幕太小，那麼它應該是標誌，標題，然後菜單。 （路的兩邊有一個COL-LG-2）

我的嘗試是：

<header class="row"> 
     <div id="logo"class="col-xs-12 col-sm-2 
         col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2"> 
     </div> 
     <div id="title_menu" class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
      <div id="title"> 
       Title 
      </div> 
      <nav id="navigation_bar" > 
       Menu 
      </nav> 
     </div>  
    </header> 
    <div class="row">  
     <div id="something" class="col-xs-12 col-sm-12 
        col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2"> 
      something 
     </div> 

header { 
    background: #0090e5 !important; 
} 

#logo { 
    height:250px; 
} 
#title_menu { 
    height:50px; 
} 

可是，在一個IPhone標題和菜單消失，似乎是下方的行中的元素之後。我正在使用高度，因爲我希望一切都與該行的底部對齊。

Answer 1

我不確定你要做什麼，但在你的課堂上似乎有相當多的冗餘。關於Bootstrap您應該瞭解的一件事是，如果列數發生變化，您只需指定每個大小的列數。例如，如果您希望div在小型，中型和大型上佔用2列，則只需定義小型，每個小於小型的大小將自動使用相同數量的列。同樣，您不需要指定col-xs-12，因爲這已經被假定。所以，你可以把它簡化爲這個（請注意，我只是如何定義sm列數和其他一切自動照顧）：

<div class="container"> 
    <header class="row"> 
    <div id="logo" class="col-sm-2"> 
     <img src="http://placehold.it/50x50"> 
    </div> 
    <div id="title_menu" class="col-sm-5"> 
     <div id="title"> 
     Title 
     </div> 
    </div> 
    <div class="col-sm-5"> 
     <nav id="navigation_bar"> 
     <ul> 
      <li><a href="#">Menu Item 1</a></li> 
      <li><a href="#">Menu Item 2</a></li> 
      <li><a href="#">Menu Item 3</a></li> 
      <li><a href="#">Menu Item 4</a></li> 
     </ul> 
     </nav> 
    </div>  
    </header> 
</div> 

這將顯示標誌，標題和菜單上的所有同一行從小到大，它會顯示徽標，標題和菜單疊加在手機上（xs）。

Bootply example