Question

我想在bootstrap中删除一些样式，这是一个例子：

的test.html：

<div class='span1'></div>

bootstrap.css：

span1 {
  width: 60px; 
}

我希望删除width样式，并添加min-width: 60px样式

我这样做：

在html中添加test类：

<div class='span1 test'></div>

在css中：

.test{
  min-width: 60px;
}

但是如何删除width: 60px中的bootstrap.css？

Answer 1

您可以使用auto重置宽度：

.test{
  width: auto;
  min-width: 60px;
}

工作示例：

span {
  width: 100px;
  background-color: red;
}

span.test {
  width: auto;
  min-width: 60px;
}

<span class="test">
  span!
</span>

Answer 2

之前的答案都没有真正重置以前的CSS规则......他们只是添加一个新的规则（当宽度设置为auto或inherit时，会创建不同的规则：前者属性调整，后者使用父元素作为参考），而span不是understand why the width is not affected (check the answer to "Question 2" to understand why)的最佳元素。

以下是使用p和span（"inline non-replaced elements" like span "the width property does not apply"）的证据：

p, span {
  width: 100px;
  background-color: red;
  color:white;
}
p.test-empty {
  width: '';
  min-width: 60px;
}
p.test-auto {
  width: auto;
  min-width: 60px;
}
p.test-inherit {
  width: inherit;
  min-width: 60px;
}

<p>
  p without classes EXAMPLE
</p>
<p class="test-auto">p -> width: auto EXAMPLE</p>
<p class="test-inherit">p -> width: inherit EXAMPLE</p>
<span>span without classes EXAMPLE</span>
<br>
<span class="test-auto">span -> width: auto EXAMPLE</span>
<br><span class="test-inherit">span -> width: inherit EXAMPLE</span>

但是，在重新阅读问题之后，{strong}没有提及 <{1}}元素。 nataila 所指的是 bootstrap.css 中定义的span元素中的class="span1"。因此，回答这个问题：

如何删除 bootstrap.css 中的div？

您可以通过以下方式执行此操作：

定义一个比 bootstrap.css 规则更具体的新CSS规则（例如：width: 60px）;
或者您可以在调用/强调 bootstrap.css （.span1.test{width:auto}）后重新定义.span1。

auto property will adjust the element to the surrounding context，因此在这种情况下，.span1{width:auto}将被扩展，以便使用width的可用空间：

#container

div:not(#container) {background-color: red;color: white;margin-bottom: 5px;font-size:11px}
#container {width: 500px}
.test-350 {width: 90px;min-width: 60px}
.span1.test-150-specific {width: 100px;min-width: 60px}
/* from bootstrap.css */
.span1 {width: 60px}
.test-210 {width: 110px;min-width: 60px}
.test-0 {width: 0;min-width: 60px}
.test-auto {width: auto;min-width: 60px}
.test-inherit {width: inherit;min-width: 60px}

请注意，由于特异性或由于优先权而应用其他规则，如果<div id="container"> <div class="span1"> Bootstrap.css default span1 </div> <div class="span1 test-auto"> width: auto EXAMPLE </div> <div class="span1 test-inherit"> width: inherit EXAMPLE </div> <div class="span1 test-0"> .test-0 is defined with width:0 but, due to min-width, it actually has width=60px </div> <div class="span1 test-150-specific"> .test-150-specific is defined together with .span1, thus width=150px </div> <div class="span1 test-210"> .test-210 is defined after .span1, thus width=210px </div> <div class="span1 test-350"> .test-350 is defined before .span1, which means it will get span1's width, thus width=60px </div> </div>已定义且min-width: 60px低于60px，则该元素将保留为60px！

Answer 3

您应该可以通过指定<div class="btn-group" data-toggle="buttons"> <label class="btn btn-success my_data_flag active" id="one"> <input name="options" type="radio" checked> ONE </input> </label> <label class="btn btn-success my_data_flag" id="two"> <input name="options" type="radio"> TWO </input> </label> <div class="btn-group"> <label class="btn btn-success dropdown-toggle" data-toggle="dropdown"> <span id="text"> More Options </span><span class="caret"></span> </label> <ul class="dropdown-menu" id="divNewNotifications"> <li><a class="my_data_flag" id="three"> THREE </a></li> <li><a class="my_data_flag" id="four"> FOUR </a></li> </ul> </div> </div>  <script> $('.dropdown-toggle').dropdown(); $('#divNewNotifications li > a').click(function(){ if (this.text !== ' More Options ') $('#text').text($(this).html()); }); </script>值来重置宽度：

inherit

Answer 4

.test{
  min-width: 60px;
  width:auto;
}

应该像魅力一样工作：）

如何删除CSS样式？

4 个答案: