一种使Bootstrap col-xx在列之间没有填充的方法

Question

Bootstrap col-xx类中定义的padding有时会在小屏幕上浪费空格，所以我想通过使用某些css设置嵌套col-xx来删除填充：

<style>
div[class^=col-] > div[class^=col-] {
    padding-left: 0px;
    padding-right: 0px;
}
</style>

<div class="row">
    <div class="col-xs-12">
        <div class="col-xs-4">a</div>
        <div class="col-xs-4">b</div>
        <div class="col-xs-4">c</div>
    </div>
</div>

我的实施看起来不错吗？嵌套col-xx是否存在任何潜在的样式问题？

Answer 1

应该没有问题，但我不会在整个col-X上声明0填充，而是我会创建一个自定义的无填充类，并将0填充应用于该类。

knife cookbook show <cookbook_name>

不要修改boostrap核心元素的风格是一个好主意，因为它可能会让处理相同代码的其他人感到困惑。