Question

我试图让导航栏中的所有元素始终显示在导航栏的中心，从而显示在页面的中心，但它们仍然向左拉。当我删除我的引导程序库时，它们是居中的，所以在某处有冲突，但我不确定是什么，我想使用引导程序。

我的自定义CSS也在引导程序之后链接。

非常感谢任何伟大的人。

HTML：

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="container">
            <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">About</a></li>
            </ul>
        </div>
    </div>
</div>

CSS：

.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
}

.nav {
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}

.nav  li {
    display:inline;
}

.nav a {
    display:inline-block;
    padding:10px;
}

.navbar-default {
    background: #900000;
    border: none;
}

Answer 1

默认情况下，Bootstrap的css向左浮动.navbar-nav。因此：

@media (min-width: 768px)
.navbar-nav {
    float: left;
    margin: 0;
}

您需要覆盖此属性。我建议给一个独特的类可能像.myNav并重置这个浮点数。还添加display:inline-block

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="container">
            <ul class="nav navbar-nav myNav">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">About</a></li>
            </ul>
        </div>
    </div>
</div>

CSS：

.myNav{
float:none;
display:inline-block;
}

最后，在包装导航栏元素中添加text-align：center以使内容居中

.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
  text-align:center;
}

Answer 2

这是一个可能的解决方案：

HTML：

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="container">
            <ul class="nav navbar-nav navbar-center">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">About</a></li>
            </ul>
        </div>
    </div>
</div>

CSS：

.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
}

.navbar-center {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    text-align:center;
}

.nav  li {
    display:inline-block;
    float: none;
}

.nav a {
    padding:10px;
}

.navbar-default {
    background: #900000;
    border: none;
}

小提琴：https://jsfiddle.net/j2ska9ym/

响应页面中心的Center Bootstrap li元素

2 个答案: