gpt4 book ai didi

html - 如何使 Bootstrap 导航栏居中?

转载 作者:太空宇宙 更新时间:2023-11-04 02:33:25 24 4
gpt4 key购买 nike

我见过几个尝试使 Bootstrap 导航栏居中的示例,但我无法使它们中的任何一个工作。我已经在 navdivul 上尝试了 style="text-align:center" 但它没有任何影响。

知道我做错了什么吗?

<!DOCTYPE html>
<html>

<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>

<body>
<div class="container">


<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav nav-pills">
<li><a role="presentation" href="#">Link1</a></li>
<li><a role="presentation" href="#">Link2</a></li>
<li><a role="presentation" href="#">Link3</a></li>
<li><a role="presentation" href="#">Link4</a></li>
</ul>
</div>
</nav>

</div>
</body>

</html>

https://plnkr.co/edit/EDf9leSPZVoS4l9dQCfv?p=preview

最佳答案

问题是你的“nav nav-pills li”在你的 css 中有一个默认的“float:left”。这使得你的文本对齐永远不会起作用,因为 float 总是会覆盖任何其他文本属性。

解决此问题的一种方法是复制您的 css 文件中的下一个声明:

.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
text-align: center;
}
.nav-pills>li {
float: none !important;
display: inline-block;
}

希望这能行得通

关于html - 如何使 Bootstrap 导航栏居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36104886/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com