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

这会产生：this

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

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

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

Answer 2

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

如果你想多次使用它，你应该使用类。

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

<强> CSS

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

Demo

修改根据您的需要（如您在评论中指定的那样）。

<强> HTML

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

<强> CSS

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

Demo

Answer 3

好的，修正了一些媒体查询jsfiddle

媒体查询

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

Answer 4

如果您希望使用较少的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;
  }

}

在此处查看演示https://jsfiddle.net/adratarek/q8kec8xb/4/

仅在bootstrap列内部具有边框

4 个答案: