更改字体大小时的自举网格行偏移量

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也一样，为了你的登录右对齐。