大型引导堆叠导航药丸？

【问题标题】：Large bootstrap stacked nav-pills?大型引导堆叠导航药丸？
【发布时间】：2016-12-17 09:16:57
【问题描述】：

如果我有一个像下面那样堆叠的引导列表，有没有办法让它变大。就像您可以使用按钮 (btn-lg) 或输入 (input-lg) 一样？

<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>

【问题讨论】：

您可以将btn-lg 类添加到您的a 元素中，但它只会增加字体大小。如果你想让它变得更大，你必须添加自己的 CSS 样式。

标签： html css twitter-bootstrap

【解决方案1】：

btn-lg 具有以下样式定义

.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

在 Bootstrap 中，line-height 中的 nav-pills 取自 body 选择器。因此，您可以通过这种方式重新定义 nav-pills 列表中列表项的属性：

.nav-pills>li {
    line-height: 2em;
    font-size: 2em;
}
.nav-pills>li>a {
    padding: 10px;
}

等等

.nav-pills>li {
    line-height: 2em;
    font-size: 2em;
}
.nav-pills>li>a {
    padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>

【讨论】：