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

Posted 2023-03-05

【中文标题】一种使 Bootstrap col-xx 在列之间没有填充的方法[重复]

【英文标题】：A way to make Bootstrap col-xx no padding between the columns [duplicate]

【发布时间】：2017-01-12 16:05:42

【问题描述】：

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 是否存在任何潜在的样式问题？

【问题讨论】：

相关：***.com/questions/19562903/…

您还应该包括margin: 0。你可以缩短填充像padding: 0

【参考方案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 核心元素的样式，因为这可能会让其他使用相同代码的人感到困惑。