我有一个看起来像这样的结构:
<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。有什么方法可以覆盖移动设备的 row 功能,这样它就不会破坏元素吗?如果无法做到这一点,我似乎将不得不创建一个完全不同的 HTML 文档,这不是我想要的。
最佳答案
您可以使用 !important
覆盖 CSS。有时它的使用会被滥用并被认为是懒惰的。当 CSS 需要重写并且没有其他选择可行时,这是一个很好的解决方案。一个很好的例子是当 javascript 插件正在生成内联 CSS 时使用 !important
并且您需要覆盖它并且您没有编辑插件的选项。如果一次使用 !important
就可以避免重写整个 html
,那么我建议使用它。
.span-3-phone {
width: 32% !important;
}
关于html - 在 Bootstrap 中覆盖响应行默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18448448/