小さなデバイスの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>