如何在Bootstrap 3中居中导航栏？

xv8emn3q 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(2)|浏览(160)

我不能在Bootstrap 3中居中导航栏，因为我不知道如何在Bootstrap中编辑CSS。我在本地下载了Bootstrap，所以我不知道是否需要编辑Bootstrap的css文件夹中的CSS文件，或者是否应该创建自己的CSS文件。引导文件夹中还有多个CSS文件。我需要编辑哪一个？
我尝试直接在Bootstrap html文件中编辑样式，但网站上没有任何效果。

twitter-bootstrap

来源：https://stackoverflow.com/questions/76997641/how-do-i-center-a-navbar-in-bootstrap-3

2条答案

按热度按时间

qco9c6ql1#

您可以简单地通过将flex属性添加到navlinks的父节点来实现这一点。所以，你的代码看起来像这样：

.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）回复(0）举报 2023-09-28

j91ykkif2#

据我所知，你正在使用一个预编译版本。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">

如果您看不到自己的更改，可能有以下几个原因。
1.检查CSS文件是否已加载。您可以在浏览器的检查器（浏览器的开发工具）中看到这一点
1.检查您的CSS文件是否包含在bootstrap.css之后
1.检查您尝试自定义的HTML元素的CSS选择器。有时你必须覆盖完全相同的选择器（例如：“.navbar .navbar-header .navbar-brand {...}”）
1.尝试清除浏览器缓存
1.问题可能出在某些浏览器扩展中。在这种情况下，请尝试在隐身模式下查看此页面（在隐身模式下默认情况下扩展不起作用）
关于CSS的更多信息，你可以找到there (MDN docs)
此外，它将是很好的阅读引导文档

赞(0）回复(0）举报 2023-09-28

我来回答

如何在Bootstrap 3中居中导航栏？

2条答案

相关问题

热门标签

最新问答