Bootstrap 導航欄居中：打造美觀導航

如何讓Bootstrap 導航欄居中？在

元素中添加實用程序類justify-content-center，使所有元素水平居中。可選：添加偏移類（如offset-1）以偏移導航欄，向左或向右偏移取決於偏移類的值。

Bootstrap 導航欄居中

借助Bootstrap 強大的靈活性，輕鬆打造美觀居中的導航欄。

方法：

1. 添加實用程序類:

   • 在<nav></nav>元素中添加實用程序類justify-content-center 。
   • 這將使導航欄中的所有元素水平居中。

2. 可選：添加偏移類:

   • 如果要偏移導航欄的內容，可以在<nav></nav>元素中添加偏移類，例如offset-1或offset-md-3 。
   • 這將向左或向右偏移導航欄，具體取決於偏移類的值。

示例代碼：

 <code class="html"><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></code>

通過上述方法，即可輕鬆創建水平居中的Bootstrap 導航欄。

以上是Bootstrap 導航欄居中：打造美觀導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！