如何将 Bootstrap 3 导航栏中的内容居中？

将内容集中在响应式引导导航栏中

问题：

尽管在线探索了许多解决方案，您在将 Bootstrap 3 导航栏中的内容居中时遇到问题。您能否协助使用 CSS 或方法来相应地对齐内容，同时保持代码兼容性？

示例代码：

<nav class="navbar navbar-default" role="navigation">
  <!--- ... -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!--- ... -->
    </ul>
  </div>
</nav>

答案：

方法：

要让内容居中，修改CSS .navbar .navbar-nav 和 .navbar .navbar-collapse 类如下所示：

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

说明：

这些更改使您能够：

• 从 中删除默认的 float: left 属性。 navbar .navbar-nav，允许项目对齐并排。
• 设置显示：inline-block；使导航项内联元素，保持适当的间距。
• 使用 text-align: center; 将文本在导航栏中居中； on .navbar .navbar-collapse。

附加说明：

• 如果您只想在较大的屏幕上实现这种居中效果，请将 CSS 包围在媒体查询，针对适当的屏幕尺寸。
• 使用 CSS 来微调内容的精确位置。

以上是如何将 Bootstrap 3 导航栏中的内容居中？的详细内容。更多信息请关注PHP中文网其他相关文章！