css - Twitter bootstrap btn-large 在导航栏中

标签 css twitter-bootstrap

我无法在导航栏中找到适当大小的 btn-large 按钮。 尝试更改 navbarHeight 和 baseLineHeight 变量,但这没有帮助。 按钮比导航栏外部使用的按钮小。

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a title="" class="btn btn-primary btn-large" href=""><i class="icon-plus-sign icon-white"></i>Add</a>
                <ul class="nav pull-right">
                <li class="divider-vertical">
                <li><a href="">Val</a></span></li>
                <li class="divider-vertical">
                <li><a href="">Val2</a></li>
                <li class="divider-vertical">
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">val3<i class="icon-user"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="">My account</a></li>
                        <li><a href="/accounts/logout/">Log out</a></li>
                    </ul>
                </li>
            </ul>
            </div>
       </div>
</div>

最佳答案

这是设计使然,因为导航栏高度是标准的(以容纳其周围的其他元素)。您可以通过创建自己的类并“强制”显示 .btn-large 的填充来覆盖该限制,如下所示:

.navbar .btn-large-navbar {
    padding: 9px 14px;
}

然后您可以将新类添加到大按钮中:

<a title="" class="btn btn-primary btn-large btn-large-navbar" href=""><i class="icon-plus-sign icon-white"></i>Add</a>

请记住,由于您拉伸(stretch)了导航栏,某些元素可能看起来不合适。

演示:http://jsfiddle.net/gnEAe/

关于css - Twitter bootstrap btn-large 在导航栏中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10727706/

相关文章:

css - 具有矩阵结构的有序列表

html - 为什么在这段代码中 Height : auto and Height: 100% on same element

javascript - RequireJS 脚本加载顺序

html - 我如何让这个按钮居中

jquery - 简单的 CSS/HTML 菜单链接不起作用

javascript - 我无法让切换的 classList 样式实际应用到那里

html - 如何删除html表格中的水平线?

twitter-bootstrap - 在 LESS 中覆盖

jquery - 自动调整画廊旁边的位置信息框

html - Laravel 显示没有图像的 html div