如何在小型设备中添加div之间的边框底部而不影响大型设备

Question

在大型设备边框右侧应显示，小型设备边框底部应显示而不影响大型设备和小型设备之间的一些间距

Answer 1

您应该将媒体查询添加到小型设备

＆＃13;

＆＃13;

  @media only screen and (max-width: 300px)
 {
 your div name 
{
    border-style: solid;
    border-bottom: thick dotted #ff0000;
 }
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

<div class="col-sm-6">
    <div class="box">
    ...
    </div>
</div>

<div class="col-sm-6">
    <div class="box">
    ...
    </div>
</div>

<style>
.box{ border-right:#000 solid 1px;}

/*Small Screen - below 768 resolution device*/
@media only screen and (max-width: 768px){.box{border-right:none; border-bottom:#000 solid 1px; margin-bottom:20px;}}
</style>

Answer 3

<div class="col-sm-6">
    <div class="box">
    ...
    </div>
</div>

<div class="col-sm-6">
    <div class="box">
    ...
    </div>
</div>

<style>
/*Desktop*/
.box{ border-right:#000 solid 1px;}

/*Small Screen - below 768 resolution device*/
@media only screen and (max-width: 768px){
    .box{border-right:none; border-bottom:#000 solid 1px; margin-bottom:20px;}
}
</style>