如何在Bootstrap中减少网格系统中单个div的宽度

Question

<div class="col-sm-2" style="text-align: right;" >
        mytext1
</div>
<div class="col-sm-2" style="text-align: right;" >
        mytext2
</div>
<div class="col-sm-2" style="text-align: right;" >
        mytext3
</div>

我需要减小第二个

div

的大小，并且我不想使用

col-sm-1

，因为它太小，并且不想使用

col-sm-2

，因为它太大。但我需要介于两者之间的东西，比如

col-sm-1.5

有没有办法解决这个问题。

Answer 1

您可以定义自定义类，因为 bootstrap sm-1 和 sm-2 对应于 8.33% 和 16.66% 您可以像这样创建自定义类：

.col-sm-1-5 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
}

HTML：

<div class="col-sm-2" style="text-align: right;" >
        mytext1
</div>
<div class="col-sm-1-5" style="text-align: right;" >
        mytext2
</div>
<div class="col-sm-2" style="text-align: right;" >
        mytext3
</div>