在Bootstrap 中居中導航項目
在Bootstrap 4 導航列中居中導航連結的任務（相對於瀏覽器視窗大小）事實證明這是一個共同的挑戰。雖然使用 ml-auto 和 mr-auto 的簡單解決方案可能很接近，但它無法實現精確居中。
為了解決這個問題，我們提供了一種響應式地利用 flexbox 和 margin 實用程式的綜合方法。
Bootstrap 4 Alpha 6 以上
在Bootstrap 版本4 Alpha 6 和上面，以下程式碼提供了品牌和連結居中：
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-md-flex d-block flex-row mx-md-auto mx-0">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse mr-auto">Bootstrap 4.1
在 Bootstrap 4.1 以上版本中，居中策略保持不變。以下是在行動裝置上對齊連結並將品牌定位到左側的範例：<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse">視口中的精確連結居中
如果您需要在視圖中精確居中連結視口，試試此方法：<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse">以上是如何在 Bootstrap 4 導覽列中精確居中導航連結？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
