bootstrap栅格怎么去掉右边的border

Question

请教个问题，因为bootstrap的栅格是自适应的，比如下面这段：

<div class="row">
    <div class="col-sm-3 col-xs-6 utop">
        <div class="utop-row">1</div>
    </div>
    <div class="col-sm-3 col-xs-6 utop">
        <div class="utop-row">2</div>
    </div>
    <div class="col-sm-3 col-xs-6 utop">
        <div class="utop-row">3</div>
    </div>
    <div class="col-sm-3 col-xs-6 utop">
        <div class="utop-row">4</div>
    </div>
</div>

会随着屏幕尺寸，一行4列变成一行2列

我需要去掉每行最后一列的border-right: 1px solid #ddd;

请问怎么做？

Answer 1

根据class和结构，在两种布局下，给要最后的那一个添加
同级

.col-sm-3.sm-no-right-border,
.col-xs-6.xs-no-right-border{
    border-right:none;
}

父子：

.col-sm-3 .sm-no-right-border,
.col-xs-6 .xs-no-right-border{
    border-right:none;
}

Answer 2

每行最后面的border-right，这应该不是bootstrap里面的吧

Answer 3

你添加一个类名，border-right: 0px solid #ddd！important;直接强制去掉就可以了

Answer 4

临时变的话，可以直接加style属性，或者给相应的结构上加id，因为id比class的级别高，所以会覆盖掉class里出现的相应属性，或者也可以按这个思路使用相应的组合选择器去命中。一般不建议直接改bootstrap的原始样式，除非你明确的知道自己在做什么~