是否有.row替代？

Question

我的HTML页面中有两个.row部分，我想要不同的CSS，但对于我的CSS，它们都属于.row，而.row中的所有方面都通过它们传播。我如何将这些.row个性化为单独的CSS，而不会丢失其中一个的.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填充

使用.row填充

你看，它小得多吗？

Answer 1

我不确定我是否理解你的问题，但我认为你想要这样的事情：

＆＃13;

＆＃13;

.row {
  font-size: 30px;
}

.divA {
  color: red;
}

.divB {
  color: blue;
}

＆＃13;

<div class="row divA">
  <p> I'm Div A</p>
</div>

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

＆＃13;

＆＃13;

＆＃13;

他们都有font-size:30px但颜色不同