2017-07-07 61 views
2

我在我的HTML頁面中有兩個.row部分,我想要不同的CSS,但對於我的CSS,它們都屬於.row,並且.row中的所有方面都通過它們傳播。我如何個別化這些.row的單獨的CSS,而不會失去其中之一的.row特性?是否有.row替換?

請告知,如果這沒有任何意義...:P

我的HTML + CSS

<style> 
.row { 
      margin: 0 5px; 
      position: relative; 
     } 
.row { 
      padding: 0 30px; 
     } 
</style> 

<div class="row"> 
    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"> 
      <img width="100%" src="https://image.ibb.co/gweBdQ/image.jpg" alt="Annas Blog"> 
      <div class="caption"> 
      <h3><font face="Calibri"><strong>The Blog!</strong></font></h3> 
      <p><small>View Anna's Blog! That's why you're here anyway... right?</small></p> 
      <p><a href="BLOG.html" class="btn btn-primary" role="button">View Blogs!</a></p> 
      </div> 
     </div> 
     </div> 

而單獨.row

<div class="container"> 
     <div class="row"> 
      <div class="col-sm-3"> 
       <ul class="list-group"> 
        <li class="list-group-item text-center"><label><font class="text" align="center" face="Indie Flower" size="6">See Anna's People!</font></label> 
        <br/> 
        <img style="vertical-align:middle" width="299" height="299" class="img-circle" src="https://pbs.twimg.com/profile_images/880522424705441799/EPujLjrD_400x400.jpg" /> 
       </li> 
      </div> 
     </div> 
    </div> 

而且填充上的問題第二個.row影響第一個.row。

沒有.row填充

no padding

隨着.row填充

no padding

你看,它要小得多?

+0

燦你請發佈一個片段? –

+1

向其中的一個添加額外的類,並在CSS中添加一個樣式 –

+0

您將得到類class =「row custom-row」 –

回答

1

我不知道如果我正確地理解你的問題,但我想你想是這樣的:

.row { 
 
    font-size: 30px; 
 
} 
 

 
.divA { 
 
    color: red; 
 
} 
 

 
.divB { 
 
    color: blue; 
 
}
<div class="row divA"> 
 
    <p> I'm Div A</p> 
 
</div> 
 

 
<div class="row divB"> 
 
    <p>I'm Div B</p> 
 
</div>

他們都有font-size:30px,但有不同的顏色