Question

我正在使用bootstrap-select，这会在div之上添加select。换句话说，我定义：

<select id="@Html.IdForModel()" 
    name="@Html.NameForModel()" 
    class="selectpicker form-control" 
    data-live-search="true"></select>
...

 var selectBox = $('#@Html.IdForModel()');
 selectBox.selectpicker()

但在使用Developer Tools的页面中，我看到了：

<div class="btn-group bootstrap-select form-control">
  <button .../>
  <div class="dropdown-menu open" .../>
  <select .../>
</div>

现在我需要这个外部div为"display:block"，这解决了我遇到的一些布局问题。但btn-group和bootstrap-select都适用"display:block-inline"。

我试过了：

在单独的css文件中为bootstrap-select定义自己的样式
将!important添加到我的定义
selectBox.parent().addClass("select-parent-div");，我的css有：.select-parent-div{display: block !important}

唯一有用的是selectBox.parent().css("display", "block");，但我真的想在css文件中使用我的样式。为什么css不适用，我该怎么办呢？

Answer 1

你需要检查应用bootstrap的样式是否标记为！important在这种情况下，css不会考虑你的风格。

之前我遇到过这个问题，工作的诀窍是在页面中创建相同名称的bootstrap相同的样式，并根据需要更改属性。

覆盖动态生成元素中的css

1 个答案: