提问人：Fruit_alpha 提问时间：8/29/2023 更新时间：9/7/2023 访问量：54
如何在 Bootstrap 3 中将导航栏居中？
How do I center a navbar in Bootstrap 3?
问：
我无法在 Bootstrap 3 中居中导航栏，因为我不知道如何在 Bootstrap 中编辑 CSS。我在本地下载了 Bootstrap，所以我不知道我是否需要编辑 Bootstrap 的 css 文件夹中的 CSS 文件，或者我是否应该创建自己的 CSS 文件。bootstrap 文件夹中还有多个 CSS 文件。我需要编辑哪一个？
我尝试直接在 Bootstrap html 文件中编辑样式，但网站上没有任何发现。
答：
1赞
Yudiz Solutions
8/29/2023
#1
只需将 flex 属性添加到导航链接的父级即可。因此，您的代码将如下所示：
.navbar-nav {
width: 100%;
display: flex;
justify-content: center;
}<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Navbar content here -->
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">About Us</a></li>
<li><a href="javascript:void(0)">Contact Us</a></li>
</ul>
</div>
</nav>
0赞
serdiuk
8/29/2023
#2
据我了解，您使用的是预编译版本。Bootstrap 3 的最新可用版本是 3.3.7。
您应该在 HTML 中链接此 CSS 文件 dist/css/bootstrap.min.css。
<link href="css/bootstrap.min.css" rel="stylesheet">
你不应该编辑它！
所有自定义更改都必须放在您自己的 CSS 文件中。链接到 Bootstrap 后，您应该将其链接到 HTML 中。这非常重要。否则，将不会应用更改。
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
如果您没有看到更改，可能有几个原因。
- 检查是否加载了 CSS 文件。您可以在浏览器的检查器（适用于浏览器的 DEV 工具）中看到此内容
- 检查您的 CSS 文件是否包含在引导.css 之后
- 检查您尝试自定义的 HTML 元素的 CSS 选择器。有时您必须覆盖完全相同的选择器（例如：“.navbar .navbar-header .navbar-brand {...}")
- 尝试清除浏览器缓存
- 问题可能出在某些浏览器扩展中。在这种情况下，请尝试在隐身模式下查看此页面（默认情况下，扩展程序在隐身模式下不起作用）
你可以在那里找到更多关于CSS的信息（MDN文档）
此外，阅读引导程序文档会很好
评论