我最近在我的网站上实现了折叠 Bootstrap 导航栏。但是,当它处于完整形式时,我有一个问题。文本与导航栏的左侧对齐,尽管有很多 CSS 配置,并且浏览了 stackoverflow,但我尝试过的所有更改都没有成功。 我正在尝试更改导航栏,以便其中的文本/链接集中。
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- end navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a>
<li><a href="#home">Days Out</a></li>
<li><a href="#home">Ghosts</a></li>
<li><a href="#home">Beasts</a></li>
<li><a href="#home">History</a></li>
<li><a href="#home">About Us</a></li>
<li><a href="#home">Gifts</a></li>
<li><a href="#home">Blog</a></li>
<li><a href="#home">Contact Us</a></li>
</ul>
</div><!-- end collapse -->
</div>
最佳答案
您只需要更改导航栏的float
行为,尝试添加以下样式:
.navbar-collapse {
text-align:center;
}
.navbar-nav {
display:inline-block;
float:none;
}
BootplyDemo
关于css - Bootstrap 导航栏中心文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28150570/