Css 如何使用display:none使Knockout成为可见的Knockout标记！重要的

我有一个站点同时使用knockout和bootstrap，我需要使用knockout可见数据绑定来根据给定的条件添加和删除某些元素，但是，当knockout add是

style=“display:none”时

到

div

它被引导覆盖为

隐藏md

和

隐藏lg

使用

显示：阻塞！重要信息

在较小的屏幕上

 <div class="col-xs-1 hidden-md hidden-lg" data-bind="visible: BooleanValue"></div>

有没有一种简单的方法可以让knockout使用

style=“display:none！important”

这样就不会显示我的值

---

干杯。

您可以使用

css

数据绑定。

css

绑定向关联的DOM元素添加或删除一个或多个命名的css类

<div class="col-xs-1 hidden-md hidden-lg" data-bind="css: YourCss"></div>

---

您可以使用

css

绑定，并在样式指南（底部）中添加样式规则：

ko.applyBindings（{booleanValue:ko.observable（true）}）
.block{
显示：块！重要；
}
.隐藏重要信息{
显示：无！重要；
}

可见绑定
css绑定
切换
另一种解决方案是将元素包装到另一个元素中，并使用Knockout绑定包装器元素的可见性。例如：

<div data-bind="visible: BooleanValue">
    <div class="col-xs-1 hidden-md hidden-lg"></div>
</div>



另外，为了避免破坏页面布局，您可以这样使用：

<!-- ko if: BooleanValue -->
    <div class="col-xs-1 hidden-md hidden-lg"></div>
<!-- /ko -->



与已经提出的答案相比，这两种解决方案都不那么优雅，但可能更快、更容易实现，而且在我看来，它们的优点是避免了使用<代码>的潜在黑暗世界！重要信息

覆盖引导的样式设置