削除方法：レスポンシブページのラストチャイルドボーダー

Question

div内に5つのサブディビジョンがあるウェブページを作成しました。これらのdivを分離するために、私は768pxの幅に、これらの境界線を削除したいが、私はこれを行うことはできませんよ最後の子ボーダー

.col-lg-2:not(:last-child) { 
    border-right: 1px solid #9a6eb7; 
} 

与えています。使用している場合

.col-sm-6:not(:last-child) { 
border-right: 0px solid #9a6eb7; 
} 

次に、幅の広いデバイス用の枠線を削除しています。

.content 
 
{ 
 
\t clear:both; 
 
\t min-height:500px; \t 
 
} 
 
.contentHeader 
 
{ 
 
\t font-size:40px; 
 
\t font-family:TROUPE-REGULAR; 
 
\t text-align:center; 
 
\t height:150px; 
 
} 
 

 
.content1 
 
{ 
 
\t float:left; 
 
} 
 
.content1 ,.content2 , .content3 , .content4 ,.content5 
 
{ 
 
\t height:313px; 
 
} 
 
h2 , p 
 
{ 
 
text-align:center; 
 
font-family:TROUPE-REGULAR; \t 
 
} 
 

 
.dog ,.cat,.bird 
 
{ 
 
min-width:190px; 
 
height:150px; 
 
vertical-align:center; 
 
} 
 
.bunny , .hamster 
 
{ 
 
\t width: 180px; 
 
    height: 106px; 
 
\t vertical-align:center; 
 

 
} 
 
.content .col-lg-2:not(:last-child) { 
 
\t border-right: 1px solid #9a6eb7; 
 
}

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 content"> 
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 contentHeader"> 
 
WHY CHOOSE PetsApp 
 
</div> <!-- end of contentHeader--> 
 
<div class="col-md-1 col-lg-1 Blank"> </div> 
 
<div class="col-xs-12 col-sm-6 col-md-2 col-lg-2 content1"> 
 
<h2> Lost & Found </h2> </br> 
 
<p> simplified and effective 
 
plateform to search and 
 
reunitelost pets with their 
 
family 
 
</p> 
 
<img src="images/bunny.png" class="img-responsive bunny" alt="Bunny Image"/> 
 
</div> <!-- end of content1 --> 
 

 
<div class="col-xs-12 col-sm-6 col-md-2 col-lg-2 content2"> 
 
<img src="images/dog.png" class="img-responsive dog" alt="Dog Image"/> 
 
<h2> Play Date</h2> </br> 
 
<p> Connet with similar 
 
pets in and around your 
 
area. so your buddy will 
 
never be alone. 
 
</p> 
 
</div> <!-- end of content2 --> 
 
<div class="col-xs-12 col-sm-6 col-md-2 col-lg-2 content3"> 
 
<h2> Adoption</h2> </br> 
 
<p> Add or browse through our 
 
lists of pets for adoption as 
 
so them are in 
 
need of a home 
 
</p> 
 
<img src="images/cat.png" class="img-responsive cat" alt="Adoption"/> 
 
</div> <!-- end of content3 --> 
 
<div class="col-xs-12 col-sm-6 col-md-2 col-lg-2 content4"> 
 
<img src="images/hamster.png" class="img-responsive cat" alt="Pet Book"/> 
 
<h2> PET BOOK</h2> </br> 
 
<p> What's your pet upto today? 
 
Let the world know 
 
</p> 
 
</div> <!-- end of content4 --> 
 
<div class="col-xs-12 col-sm-6 col-md-2 col-lg-2 content5"> 
 
<h2> INFO/ ARTICLES</h2> </br> 
 
<p> Get Interesting tips and news 
 
stories on everything you need to know about 
 
pet health,behaviour and nutrition. 
 
</p> 
 
<img src="images/bird.png" class="img-responsive bird" alt="Info & Articles"/> </br> 
 
</div> <!-- end of content5 --> 
 

 
</div> <!--end of content-->

Answer 1

あなたは768pxの最大幅で画面のための特定のスタイルを設定したい場合は、使用することができます：これは、最大幅があれば適用されます

@media only screen and (max-width : 768px) { 
    .col-sm-6:not(:last-child) { 
     border-right: 0px solid #9a6eb7; 
    } 
} 

現在の端末の解像度は768pxです（これを無視します）。