响应式引导导航栏中的中心内容
我无法将内容集中在引导导航栏中。我正在使用引导程序3。我已经阅读了许多文章，但是所使用的CSS或方法不适用于我的代码！我真的很沮丧，所以这就像我的最后选择。任何帮助，将不胜感激！
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
</div>
<!--JAVASCRIPT-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
问题答案：
我认为这就是您想要的。您需要float: left从内部导航中删除，以使其居中并使其成为嵌入式块。
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
编辑： 如果只希望在不折叠导航时发生此效果，请将其围绕在适当的媒体查询中。
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
-
我已经将我的网站迁移到UIKit3而不是Bootstrap4。但我已经在导航栏上呆了一段时间了。现在，我的导航栏是在Bootstrap 4中构建的，如下所示： https://jsfiddle.net/eztwL9p7/1/ 所以这只是一个普通的导航栏，但是当页面足够小的时候，会出现一个切换按钮，项目变成一个下拉列表。我一直试图将此迁移到UIKit，但我在他们的模板中看不到任何选项。如果我理解正确
-
我想创建一个居中的引导导航栏与标志。我是这样看的： 我怎样才能做到这一点呢？
-
嗨，我坚持在Wordpress中定制这个额外的CSS。我使用了一个名为Poza Child的主题，它的最大宽度（100%）如下图所示。我想制作一个反应灵敏的导航栏，让它充满屏幕。 正如你在这里看到的，有一个缺口（黑色和灰色）。我想制作一个响应迅速的导航栏（全黑），就像下面的一样。 然而，由于使用的主题，我必须添加额外的CSS，使其全宽和响应任何屏幕大小。这是我的WordPress附加CSS的代码片
-
本文向大家介绍Bootstrap实现响应式导航栏效果，包括了Bootstrap实现响应式导航栏效果的使用技巧和注意事项，需要的朋友参考一下 为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个
-
嘿，我已经从Bootstrap4创建了一个导航栏，但是每当我尝试测试页面的响应性时，它就会丢失导航项的背景色。它只显示文本。有人能帮我保持导航栏的颜色，每当我点击切换链接。下面是我的html和css代码。 我希望导航栏看起来像下拉菜单一样。与导航栏的背景颜色匹配。
-
问题内容： 我在网上看到了一些使用其他版本的引导程序的示例，但是它们都改变了CSS太多，这使得学习引导程序更加困难。 我想知道在Bootstrap 4中是否可以使用折叠，叠丸，flexbox之类的工具来完成此任务？ 我的Jsfiddle缺少什么： 反应不正确 导航栏在粘性类中无法正确滚动 即使我设置了课程，菜单按钮也不是很粘。 尽管不需要答案，但背景调光器会很棒 在我的示例中，我无法弄清楚如何插入