[Bootstrap提供了诸如text-left（Alignment classes），text-lowercase（Transformation classes）等的类，与定义内联样式相同（从技术上来说，但从逻辑上来说）。
[在诸如bem之类的替代方法中，它强加了类应反映'物理'块和元素及其修饰符（或元素的状态，例如bem，active）和任何样式应该仅在CSS中应用。
Bootstrap方法似乎在结构和表示之间没有很好的关注点分离，并且与此current背道而驰。
许多人都回响了这个问题：
人们如何在保持HTML标记语义的同时使用Bootstrap？
Bootstrap提供bvision - Please stop embedding Bootstrap classes in your HTML!，您可以使用。因此，您可以在元素的选择器块内使用mixins，而不是在HTML中添加类似col-xs-12的类。要添加一行，请使用@include make-xs-column(12)。
参考@mixin make-row的答案，而不是此非语义标记：
Alexey Morashko
您可以改用：
<div class="items-list row">
<div class="item col-xs-12 col-sm-6 col-md-4">
<div class="item-name">Product first</div>
<div class="item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4">
<div class="item-name">Product second</div>
<div class="item-description">Ratione, ullam, reprehenderit aliquid saepe ab harum.</div>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4">
<div class="item-name">Product third</div>
<div class="item-description"> totam repudiandae velit eum accusantium veritatis.</div>
</div>
</div>
<div class="items-list">
<div class="item">
<div class="item-name">Product first</div>
<div class="item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div class="item">
<div class="item-name">Product second</div>
<div class="item-description">Ratione, ullam, reprehenderit aliquid saepe ab harum.</div>
</div>
<div class="item">
<div class="item-name">Product third</div>
<div class="item-description"> totam repudiandae velit eum accusantium veritatis.</div>
</div>
</div>
您可以在Sitepoint文章-.items-list {
@include make-row();
.item
@include make-xs-column(12);
@include make-sm-column(6);
@include make-md-column(4);
}
}
中找到Bootstrap混合的更多示例。