html - 仅在 Bootstrap 列内部有边框

Question

我有一组像这样的四个列:

<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;
}

这会产生:

但是，当屏幕大小调整为 768px (xs) 时，它看起来像

.

我该怎么做才能让它只在列的内部有边框？

Answer 1

如果你想拥有更少的类名并且能够将它用于超过 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