フォントサイズ変更時のブートストラップグリッド行のオフセット

Question

ブートストラップグリッドシステムを介したサイトナビゲーションをしようとしています。 私はこのレイアウトを持つ2つの列と3列を作りたい：私はタイトルとサブタイトルのためfont-sizeを設定するまで

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

コードは、正常に動作します。誰か助けてくれますか？スニペット：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

あなたが別の行のために、あなたはあなたのように別の行クラスを使用する必要があり、ことを学ぶ必要があります次のコードをチェックするように、各列が独自の行クラスになければならないように、2行で作業しています。私はこのコードがあなたを理解するのに役立つと確信しています。

<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を更新見ることができるように。