Html 仅在引导列的内部具有边框

我有一套四个柱状图，如下所示：

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

这将产生：

但是，当屏幕重新调整为768px（xs）时，它看起来像

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

Id

#border

的使用无效。ID不能根据HTML规则重复

如果要多次使用该类，则应使用该类

HTML

<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 class="row">
    <div class="col-md-3 col-xs-6 border-right" >
        <i class="fa fa-terminal"></i>
        <br>
        Linux
    </div>
    <div class="col-md-3 col-xs-6 " >
        <i class="fa fa-html5"></i>
        <br>
        HTML5
    </div>
    <div class="col-md-3 col-xs-6 border-top border-right">
        <i class="fa fa-cogs"></i>
        <br>
        Teamwork
    </div>
    <div class="col-md-3 col-xs-6 border-top">
        <i class="fa fa-bullhorn"></i>
        <br>
        Communication
    </div>
</div> 

编辑： 根据您的需要（如您在评论中所述）

HTML

<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 class="row">
    <div class="col-md-3 col-xs-6 border-right" >
        <i class="fa fa-terminal"></i>
        <br>
        Linux
    </div>
    <div class="col-md-3 col-xs-6 " >
        <i class="fa fa-html5"></i>
        <br>
        HTML5
    </div>
    <div class="col-md-3 col-xs-6 border-top border-right">
        <i class="fa fa-cogs"></i>
        <br>
        Teamwork
    </div>
    <div class="col-md-3 col-xs-6 border-top">
        <i class="fa fa-bullhorn"></i>
        <br>
        Communication
    </div>
</div> 

---

好的，通过一些媒体查询修复了此问题

媒体查询是

@media (min-width: 992px) {
    #skills  .border-right-md {
      border-right: 1px solid #ddd;
    }
     #skills  .border-top {
       border-top: none;
    }
}

---

如果您想拥有更少的类名，并且能够将其用于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>

Linux


HTML5


团队合作


沟通

---

如果您希望它具有更少css代码的动态性，请尝试此方法

.border{
     padding: 40px;
     border-bottom: 1px solid #CCC;
     border-right: 1px solid #CCC; 
}

/*xs*/
@media(max-width:767px){
  .border{
      border-right: none;
  }
}

/*sm*/
@media(max-width:991px){
  .border:nth-child(2n){
      border-right: none;
  }
}

/*md*/
@media(min-width:992px){
  .border:nth-child(4n){
      border-right: none;
  }

}

---

检查这里的演示

谢谢，我已经编辑了我的HTML和CSS来匹配这个。HTML一开始就工作了，问题是屏幕尺寸变小了，使边框显示得更像你想要的样子？编辑仍然不工作，超过xs大小很奇怪@ThomasCarroll有一个不需要的

边框右边

。这行吗？理想情况下，它最终会看起来像jsfiddle:运行良好，不知道

：不（：first child）

.border{
     padding: 40px;
     border-bottom: 1px solid #CCC;
     border-right: 1px solid #CCC; 
}

/*xs*/
@media(max-width:767px){
  .border{
      border-right: none;
  }
}

/*sm*/
@media(max-width:991px){
  .border:nth-child(2n){
      border-right: none;
  }
}

/*md*/
@media(min-width:992px){
  .border:nth-child(4n){
      border-right: none;
  }

}