Question

你好我想问一下是否有人知道如何集中一个引导导航栏。

HTML

<nav class="navbar navbar-default">
            <div class="container-fluid">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Geographical location</a></li>
                </ul>
            </div>
        </div>
    </nav>

然后我改变了导航栏的宽度，这样它就更好了，并没有那里有很多未使用的空间，但它粘在左侧，我很想把它放在中心位置。

CSS

.navbar-default {

width:38.5%;}

Answer 1

试试这个。这应该这样做

.navbar-default {
 margin-left:auto; 
 margin-right:auto;
 width:38.5%;}

Answer 2

你走了。

@media (min-width: 768px){
    .navbar-nav{
        float:none;
        margin: 0 auto;
        display: table;
        table-layout: fixed;
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-default">
            <div class="container-fluid">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Geographical location</a></li>
                </ul>
            </div>
        </div>
    </nav>

还有codepen示例：https://codepen.io/Karadjordje/pen/eewpWO

改变引导导航栏的位置

2 个答案: