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

Bootstrap的网格系统允许整个页面最多12列，因此您必须为行填充12列。

看看这个：http://www.bootply.com/SRezJSXWsE

ps：正如您所看到的，我也更新了css，以便将您的登录对齐。

更改字体大小时，引导网格行偏移量

2 个答案: