html - 仅在 bootstrap 列的内部具有边框

我有一套四种颜色的：

<div class="container-fluid" id="skills">
    <div class="row">
        <div class="col-md-3 col-xs-6 border">
            <i class="fa fa-terminal"></i>
            <br>
            Linux
        </div>
        <div class="col-md-3 col-xs-6 border">
            <i class="fa fa-html5"></i>
            <br>
            HTML5
        </div>
        <div class="col-md-3 col-xs-6 border">
            <i class="fa fa-cogs"></i>
            <br>
            Teamwork
        </div>
        <div class="col-md-3 col-xs-6">
            <i class="fa fa-bullhorn"></i>
            <br>
            Communication
        </div>
    </div>
</div>

CSS是：

#skills  #border {
    border-right: 1px solid #ddd;
}

这会产生：this
但是，当屏幕大小重新调整为768px（xs）时，它看起来像this。
我该怎么做才能使它只在列的内部有边框？

最佳答案

如果你想拥有更少的类名，并且能够将它用于4个以上的项，你可以使用它。

#skills .border:not(:first-child){
    border-left: 1px solid #ddd;
}
@media (max-width: 992px){
    #skills .border:nth-child(odd){
        border-left: none;
    }
    #skills .border:nth-child(n+3){
        border-top: 1px solid #ddd;
    }
}

html格式：

<div id="skills" class="row">
    <div class="col-md-3 col-xs-6 border" >
        <i class="fa fa-terminal"></i>
        <br>
        Linux
    </div>
    <div class="col-md-3 col-xs-6 border" >
        <i class="fa fa-html5"></i>
        <br>
        HTML5
    </div>
    <div class="col-md-3 col-xs-6 border">
        <i class="fa fa-cogs"></i>
        <br>
        Teamwork
    </div>
    <div class="col-md-3 col-xs-6 border">
        <i class="fa fa-bullhorn"></i>
        <br>
        Communication
    </div>
</div>

Fiddle