更改字體大小時的自舉網格行偏移量

Question

我正在嘗試通過Bootstrap網格系統進行網站導航。 我想使3列兩排用這個佈局：

|Title |   |Login| 
|Subtitle|Menu buttons|  | 

代碼工作正常，直到我的標題和副標題設置font-size。有誰能夠幫助我？片段：http://www.bootply.com/GLEf6MfmxE

HTML：

<header> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-4" id="title">Foo title</div> 
     <div class="col-xs-6"></div> 
     <div class="col-xs-2">Login</div> 
     <div class="col-xs-2" id="subtitle">Bar subtitle</div> 
     <div class="col-xs-1">Menu 1</div> 
     <div class="col-xs-1">Menu 2</div> 
    </div> 
    </div> 
</header> 

自定義CSS：

#title{ 
    font-size: 2em; 
} 

#subtitle { 
    font-size: 1.5em; 
} 

Answer 1

您需要了解的是，對於不同的行，你必須使用另一行類作爲您正在處理兩行，所以每列必須在它們自己的行類上，像這樣檢查下面的代碼。我相信這段代碼會幫助你理解。

<header> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-4" id="title">Foo title</div> 
     <div class="col-xs-6"></div> 
     <div class="col-xs-2">Login</div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-2" id="subtitle">Bar subtitle</div> 
      <div class="col-xs-1">Menu 1</div> 
      <div class="col-xs-1">Menu 2</div> 
     </div> 
    </div> 
    </header> 

問候

Answer 2

引導的電網系統最多允許跨頁12列，所以你必須填寫12列一行。

看看這個：http://www.bootply.com/SRezJSXWsE

PS：正如你可以看到我更新的CSS也一樣，爲了你的登錄右對齊。