我正在尝试通过 Bootstrap Grid 系统进行站点导航。 我想用这种布局制作 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;
}
最佳答案
你需要知道,对于不同的行,你必须使用另一个行类,因为你正在处理两行,所以每一列都必须在它们自己的行类上,就像这样检查下面的代码。我相信这段代码会帮助您理解。
<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>
问候
关于html - 更改字体大小时 Bootstrap 网格行偏移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43413787/