在Yii2中覆盖Bootstrap CSS [英] Override Bootstrap CSS in Yii2

问题描述

我有一个 NavBar ，我想覆盖Yii放在这个小部件上的所有类。

  Yii :: $ container-> set（''）;在搜索谷歌并阅读文档后，我发现这个代码： yii\bootstrap\NavBar'，[
'containerOptions'=> [
'class'=>''
] 
]）; 
 
 NavBar :: begin（[
'containerOptions'=> [$ b $'class'=>'无水平填充navbar-content'
] 
]）; 
  

应该覆盖（实际删除）容器中的所有类我的 NavBar ，但事实并非如此。我继续看到我的2个类和默认的 NavBar 类。

如何删除这些类并只保留我的？

请避免像在客户端使用JS去除类的黑客解决方案。我正在寻找一个适当的方式来做到这一点。

编辑：

我添加了生成的HTML请求：

 < nav id =w0class =navbar-inverse navbarrole =navigation> ; 
< div class =container-fluid no-horizo​​ntal-padding> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =＃w0-collapse> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< / div> 
< div id =w0-collapseclass =no-horizo​​ntal-padding navbar-content collapse navbar-collapse> 
< / div> 
< / div> 
< / nav> 
  

解决方案

如果您要删除崩溃和 navbar-collapse 开箱即用，使用小部件参数，您无法使用。

正如您在 NavBar的代码中看到的那样

您的选择：

在Yii2中的组件中，这些类是硬编码的。

• 修改Navbar.php文件并删除这些类（不推荐）。
  
• 直接在HTML中编写你的导航栏（不理想，但是是一种有效的解决方法）。


• 为Yii2创建您自己的自定义Navbar组件（建议，因为您可以复制Navbar.php文件，删除这些类并更改名称空间）。
  

以下是创建组件的简单教程d使用它们。

I have a NavBar and I want to override all the classes that Yii is putting on that widget. After searching inn Google and reading the docs, I found that this code:

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

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

is supposed to override (delete, actually) all classes in the container of my NavBar, but this is not the case. I keep seeing my 2 classes and the default NavBar classes.

How can I remove those classes and keep only mine?

Please refrain any hacky solutions like removing the classes with JS on the client side. I'm looking for a proper way of doing this.

EDIT:

I'm adding the generated HTML as requested:

<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>

解决方案

If you want to remove collapse and navbar-collapse out of the box, using the widget parameters, you can't.

As you can see in the code for the NavBar component in Yii2, those classes are hard-coded in there.

Your options:

• Modify the Navbar.php file and remove this classes (not recommended).
• Write directly in HTML your navbar (not ideal, but is a valid workaround).
• Create your own custom Navbar Component for Yii2 (recommended, because you can copy the Navbar.php file, remove those classes and change the namespace).

Here is a simple tutorial for creating your components and using them.

这篇关于在Yii2中覆盖Bootstrap CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！