如何在 Bootstrap 4 導覽列中精確居中導航連結？

在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 中的對齊方式。

以上是如何在 Bootstrap 4 導覽列中精確居中導航連結？的詳細內容。更多資訊請關注PHP中文網其他相關文章！