如何將 Bootstrap 4 導覽列中的導覽項目置中？

Bootstrap 中的居中導航項目

在Bootstrap 4 中，將導航項目（連結）對齊到導航列的中心可以透過使用彈性盒屬性。方法如下：

<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">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">

CSS:

.navbar {
    display: flex;
    justify-content: center;
}

上面的程式碼使用flexbox的display屬性將導覽列設定為flex容器，並使用justify-content將導覽項目與中心。 Bootstrap 的折疊類別用於隱藏較小螢幕尺寸上的導航項目。

響應式調整

為了響應性，您可以使用 Bootstrap 的 mr-auto實用程式類別來確保導覽項目與瀏覽器大小正確居中變更：

<div class="collapse navbar-collapse mr-auto">

範例

考慮以下程式碼：

<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">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">

CSS：

@media (min-width: 768px) {
    .navbar-nav {
        justify-content: center;
    }
}

這個程式碼加入了一個媒體查詢，當瀏覽器視窗寬度大時，該查詢相應地設置justify-content 768px，僅在較大螢幕上將導航項目置中。

以上是如何將 Bootstrap 4 導覽列中的導覽項目置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！