html - 优化一个简单的类

Question

是否可以将以下课程写得更短？

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

我在想 fx 类似的东西：

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>

标签： htmlcsstwitter-bootstrap

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>