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

Question

Bootstrap col-xx 类中定义的内容padding有时会在小屏幕上浪费空间，因此我想通过将 col-xx 与某些 css 设置嵌套来删除填充，如下所示：

<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 填充应用于该类。

<style>
.no-padding{
    padding-left: 0px;
    padding-right: 0px;
}
</style>

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

最好不要修改 boostrap 核心元素的样式，因为这可能会让其他处理相同代码的人感到困惑。