在 Yii2 中覆蓋 Bootstrap CSS

Question

我有一個NavBar ，我想覆蓋 Yii 放在該小部件上的所有類。 在谷歌搜索並閱讀文檔后，我發現這段代碼：

Yii::$container->set('yii\bootstrap\NavBar', [
    'containerOptions' => [
        'class' => ''
    ]
]);

NavBar::begin([
    'containerOptions' => [
        'class' => 'no-horizontal-padding navbar-content'
    ]
]);

應該覆蓋（實際上是刪除）我NavBar container的所有類，但事實並非如此。 我一直看到我的 2 個類和默認的NavBar類。

如何刪除這些類並只保留我的類？

請不要使用任何 hacky 解決方案，例如在客戶端使用 JS 刪除類。 我正在尋找一種正確的方法來做到這一點。

編輯：

我正在按要求添加生成的 HTML：

<nav id="w0" class="navbar-inverse navbar" role="navigation">
    <div class="container-fluid no-horizontal-padding">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="w0-collapse" class="no-horizontal-padding navbar-content collapse navbar-collapse">
        </div>
    </div>
</nav>

Answer 1

如果要使用小部件參數開箱即navbar-collapse刪除collapse和navbar-collapse ，則不能。

正如您在 Yii2 中 NavBar 組件的代碼中看到的那樣，這些類在那里是硬編碼的。

您的選擇：

• 修改 Navbar.php 文件並刪除此類（不推薦）。
• 直接在 HTML 中編寫您的導航欄（不理想，但有效的解決方法）。
• 為 Yii2 創建您自己的自定義 Navbar 組件（推薦，因為您可以復制 Navbar.php 文件，刪除這些類並更改命名空間）。

這是創建組件和使用它們的簡單教程。

Answer 2

如果你想移除開箱即用的collapse和navbar-collapse ，使用小部件參數，試試這個：

添加到您的導航欄...

'collapseOptions' => [
    'class' => [
        'collapse' => '',
        'widget' => '',
    ]
]

會一直這樣……

NavBar::begin([
    'brandLabel' => Yii::$app->name,
    'brandUrl' => Yii::$app->homeUrl,
     'collapseOptions' => [
        'class' => [
            'new' => 'navbar-nav-scroll',
            'collapse' => '',
            'widget' => '',
        ],
    ],
    'options' => [
        'class' => 'navbar navbar-expand-sm navbar-dark bg-primary fixed-top',
    ],
]);

這個對我有用。