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

如何在响应式 Bootstrap 导航栏中将内容居中

难以对齐 Bootstrap 导航栏中的内容？这是一个对许多用户来说可靠的综合解决方案。

了解问题

Bootstrap 的默认导航栏对齐可能会出现问题，特别是在针对响应式布局时。罪魁祸首通常是与内部导航关联的 float: left 属性。

解决方案

要使内容居中，您需要从内部导航并使其成为内联块。此外，将 text-align 属性设置为居中将使内容水平对齐。

CSS 修改

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

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

示例

实施这些 CSS 更改将使内容集中在您的导航栏。

<!-- ...navbar code here -->

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

  .navbar .navbar-collapse {
    text-align: center;
  }
</style>

<!-- ...navbar code here -->

其他注意事项

要确保对齐更改仅发生在非折叠导航栏上，请考虑将 CSS 修改包含在适当的媒体查询中。

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

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

以上是如何将内容集中在响应式引导导航栏中？的详细内容。更多信息请关注PHP中文网其他相关文章！