在Bootstrap中覆盖响应行的默认值

Question

我有一个看起来像这样的结构：

<div class="row row-phone">
  <div class="span3 span3-phone">
  <div class="span3 span3-phone">
  <div class="span3 span3-phone">
  <div class="span3 span3-phone">
</div>
<div class="row row-phone">
  <div class="span3 span3-phone">
  <div class="span3 span3-phone">
  <div class="span3 span3-phone">
  <div class="span3 span3-phone">
</div>

span3-phone CSS是一个响应式类，它使div占据容器的32％而不是通常占用的span3。 CSS很简单：

.span-3-phone {

  width: 32%;
}

这可以调整它们的宽度。问题是行类的存在在第4个div之后打破了div，而我想要每行3个div。有没有办法覆盖移动设备的行功能，以便它不会破坏元素？如果不能这样做，我似乎必须创建一个完全不同的HTML文档，这不是我想要的。

Answer 1

您可以使用!important过度使用CSS。有时候它被滥用并被认为是懒惰的。当CSS需要过度编写而没有其他选项可行时，这是一个很好的解决方案。一个很好的例子是当javascript插件生成内联CS时使用!important并且您需要覆盖它并且您没有编辑插件的选项。如果单独使用!important会阻止您重新编写整个html，那么我建议使用它。

.span-3-phone {    
    width: 32% !important;
}