如何在小设备中div间添加边框而不影响大设备

Question

在大设备边框右边应该显示并且在小设备边框底部应该显示而不会影响大设备和div之间的一些间距小设备

Answer 1

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

Answer 2

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

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

Answer 3

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