jquery - CSS - 如何在 Bootstrap 导航栏中定位我的 'a' 元素文本？

Question

我正在尝试将我的 a 元素文本放置在 Bootstrap navbar 中，但是到目前为止，我已经实现了一个 a 元素所有边距为 15 像素，高度为 0。

我正在尝试实现一个“选项卡栏”，每次用户在单独的导航栏中单击一个选项时都会创建一个新选项卡，因此 li 和 a 选项卡的元素是使用 JQuery 动态添加的。

代码如下:

HTML:

@* Navbar -- Tabs Bar *@
<nav class="navbar tabsBar">
    <div class="container-fluid">
        <ul class="nav navbar-nav tabbar-nav">

        </ul>
    </div>
</nav>

JQuery:

$(".btnSwitchView a").click(function () {
    var tabName = $(this).data("name");
    var newTab = "<li id='" + tabName + "' class='tab'><a href='#'>" + tabName + "</a></li>";
    $(".tabbar-nav").append(newTab);
})

CSS:

.tabsBar {
    background-color: gray;
    margin-bottom: 2em;
    min-height: 30px !important;
}

.tabbar-nav {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    bottom: 0;
}

.tab {
    display: block;
    margin-right: .7em;
    width: 10%;
    height: 100%;
    background-color: #222222;
    text-align: center;
}

.tab a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px 0px;
    color: gray;
}

这是结果的图片:

我希望文本在框中水平和垂直居中，并且框位于栏的底部。

在此先感谢您的帮助!

Answer 1

太多的 CSS 代码和实际上那些高度和宽度属性是问题所在，尤其是这一行:min-height: 30px !important;，它给出了 nav 正好是 30px 的高度，因为你的 nav 是空的。

试试这个:

.tabsBar {
    background-color: gray;
    margin-bottom: 2em;
}

.tabbar-nav {
    position: absolute;
    display: block;
    bottom: 0;
}

.tab {
    margin-right: .7em;
    background-color: #222222;
    text-align: center;
}

.tab a {
    color: gray;
}

这是在chrome和firefox中测试的结果