Bootstrap 导航栏居中：打造美观导航

如何让 Bootstrap 导航栏居中？在

元素中添加实用程序类 justify-content-center，使所有元素水平居中。可选：添加偏移类（如 offset-1）以偏移导航栏，向左或向右偏移取决于偏移类的值。

Bootstrap 导航栏居中

借助 Bootstrap 强大的灵活性，轻松打造美观居中的导航栏。

方法：

1. 添加实用程序类:

   • 在 <nav></nav> 元素中添加实用程序类 justify-content-center。
   • 这将使导航栏中的所有元素水平居中。

2. 可选：添加偏移类:

   • 如果要偏移导航栏的内容，可以在 <nav></nav> 元素中添加偏移类，例如 offset-1 或 offset-md-3。
   • 这将向左或向右偏移导航栏，具体取决于偏移类的值。

示例代码：

<nav class="navbar navbar-expand-lg justify-content-center">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

通过上述方法，即可轻松创建水平居中的 Bootstrap 导航栏。

以上是Bootstrap 导航栏居中：打造美观导航的详细内容。更多信息请关注PHP中文网其他相关文章！