我有一套四列像这样:
<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)时,它看起来像
的数据。
如何才能使其仅在列的内部具有边框?
4条答案
按热度按时间x3naxklr1#
如果你想拥有更少的类名,并且能够将其用于4个以上的项目,你可以使用这个。
HTML格式:
Fiddle
cgyqldqp2#
ID
#border
的用法无效。* 根据HTML规则,ID无法重复。*如果要多次使用class,则应使用它。
HTML格式
CSS格式
Demo
**EDIT:**根据您的需要(如您在注解中所指定)。
HTML格式
CSS格式
Demo
fnatzsnv3#
好的,修复了一些媒体查询jsfiddle
媒体查询为
ig9co6j14#
如果你想用更少的css代码来动态的实现它,试试这个
在此处查看演示https://jsfiddle.net/adratarek/q8kec8xb/4/