2017-07-07 21 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,但有不同的颜色