html - 在 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 需要重写并且没有其他选项可行时，这是一个很好的解决方案。一个很好的例子是!important当一个 javascript 插件生成内联 CS 并且您需要覆盖它并且您没有编辑插件的选项时的使用。如果单次使用!important会阻止您重新编写整个文件html，那么我建议您使用它。

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