我正在尝试通过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;
}
答案 0 :(得分: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>
此致
答案 1 :(得分:1)
Bootstrap的网格系统允许整个页面最多12列,因此您必须为行填充12列。
看看这个:http://www.bootply.com/SRezJSXWsE
ps:正如您所看到的,我也更新了css,以便将您的登录对齐。