Question

是否可以缩短下面的类？

<div class="col-sm-7 small-padding-right small-padding-top small-padding-bottom">

我在想类似的东西

small-padding-right top bottom

.small-padding-top {
    padding-left:5px;
}

.small-padding-bottom {
    padding-right:5px;
} 
.small-padding-left {
    padding-left:5px;
}

.small-padding-right {
    padding-right:5px;
}

<div class="row">
    <div class="col-sm-7 small-padding-right small-padding-top small-padding-bottom">
        <div class="content">1</div>
    </div>
    <div class="col-sm-5">
        <div class="row">
            <div class="col-sm-12 small-padding-left">
                <div class="sidebar-top">2</div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 small-padding-left">
                <div class="sidebar-bottom">3</div>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以执行以下操作：

[class*="padT"] {
  padding-top: 5px;
}

[class*="padB"] {
  padding-bottom: 5px;
}

[class*="padL"] {
  padding-left: 5px;
}

[class*="padR"] {
  padding-right: 5px;
}

<div class="row">
    <div class="col-sm-7 padR-padT-padB">
        <div class="content">1</div>
    </div>
    <div class="col-sm-5">
        <div class="row">
            <div class="col-sm-12 padL">
                <div class="sidebar-top">2</div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 padL">
                <div class="sidebar-bottom">3</div>
            </div>
        </div>
    </div>
</div>

Answer 2

声明时可以合并类名。

.small-padding.top {
   padding-top:5px;
}

.small-padding.bottom {
    padding-bottom:5px;
} 
.small-padding.left {
    padding-left:5px;
}

.small-padding.right {
    padding-right:5px;
}

然后输入HTML

<div class="col-sm-7 small-padding top right bottom">
   <div class="content"></div>
</div>

或

<div class="col-sm-12 small-padding left">
  <div class="sidebar-top"></div>
</div>

.small-padding.top {
   padding-top:5px;
}

.small-padding.bottom {
    padding-bottom:5px;
} 
.small-padding.left {
    padding-left:5px;
}

.small-padding.right {
    padding-right:5px;
}
.red {
background-color: red;
color: white;
}

<div class="col-sm-7 small-padding top right bottom">
   <div class="red">No left padding</div>
</div>


<div class="col-sm-12 small-padding left">
  <div class="red">Only left padding</div>
</div>

<div class="col-sm-12 small-padding top">
  <div class="red">Only top padding</div>
</div>
<div class="col-sm-12 small-padding bottom">
  <div class="red">Only bottom padding</div>
</div>
<div class="col-sm-12 small-padding right">
  <div class="red">Only right padding</div>
</div>

Answer 3

我认为您建议的类名不可行。只需为特定标签创建新的CSS样式

<div class="col-sm-7 small-padding-right small-padding-top small-padding-bottom">

您可以像这样创建新类并根据新类创建样式

<div class="col-sm-7 padding-header">

CSS

.small-padding-left {
    padding: 5px 5px 5px 0px; /* only the left side doesn't have padding like your original html code.*/
}

顺便说一句，不是.small-padding-top CSS应该包含padding-top而不是padding-left吗？ .small-padding-bottom也是如此。

优化一个简单的类

3 个答案: