Bootstrap 仅在引导数据库数据行的内部有框缐

7jmck4yq  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(4)|浏览(170)

我有一套四列像这样:

<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)时,它看起来像


的数据。
如何才能使其仅在列的内部具有边框?

x3naxklr

x3naxklr1#

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

cgyqldqp

cgyqldqp2#

ID #border的用法无效。* 根据HTML规则,ID无法重复。*
如果要多次使用class,则应使用它。

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

**EDIT:**根据您的需要(如您在注解中所指定)。
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

fnatzsnv

fnatzsnv3#

好的,修复了一些媒体查询jsfiddle
媒体查询为

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

ig9co6j14#

如果你想用更少的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/

相关问题