Question

我尝试了很多东西，但似乎都没有效果这是我使用navbar的最终目标：

navbar

这就是我现在所拥有的：

now

无论我做什么，我都无法将链接集中在一起

继承我的代码：

<nav class="navbar navbar-transparent">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
        </div>
            <ul class="nav navbar-nav">
                <li><a href="#work">work</a></li>
                <li><a href="#about">about</a></li>
                <li><a href="#skills">skills</a></li>
            </ul>
            <ul class="nav navbar-nav pull-right">
                <li><a href="#contact" >get in touch</a>
            </ul>
        </div>
    </div>
</nav>

Answer 1

HTML：

<nav class="navbar navbar-transparent">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
    </div>
        <ul class="nav navbar-nav navbar-firstnav">
            <li><a href="#work">work</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#skills">skills</a></li>
            <li class="pull-right"><a href="#contact">get in touch</a>
        </ul>
    </div>
</nav>

CSS：

.navbar-nav {
    float:none;
    margin:0 auto;
    text-align: center;
}

.navbar-firstnav>li {
    display: inline-block;
    float:none;
}

Bootply

Answer 2

您可以查看演示here

<强> HTML

<nav class="navbar navbar-transparent">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
        </div>
        <ul class="nav navbar-nav navbar-firstnav">
            <li><a href="#work">work</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#skills">skills</a></li>
            <li class="pull-right"><a href="#contact" >get in touch</a>
        </ul>
    </div>
</div>

<强> CSS

.navbar {
    border-radius: 0;
    background-image: -webkit-linear-gradient(0deg ,#232326 ,#5F695E);
}
.navbar-nav {
    float:none;
    margin:0 auto;
    text-align: center;
}
.navbar-firstnav>li {
    display: inline-block;
    float:none;
}
.navbar-firstnav>li>a {
    color: #FFF;
}
.navbar-firstnav>li>a:hover {
    color: #FFF;
    text-decoration: underline;
    background: none
}

Answer 3

您是否正在浮动ul元素？浮动text-align: center;？如果没有尝试将ul应用到{{1}}？

Answer 4

您需要修改Navbar组件的一些CSS规则。因此，将center课程添加到nav.navbar以及以下规则：

.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
}

如何使用引导程序居中对齐导航栏

4 个答案: