如何在没有所有重复代码的情况下使用 bootstrap 的响应式设计？

Question

也许我只是没有看到可以轻松纠正这个问题的东西；然而，我发现当我使用 bootstrap 的响应式设计时，我有时会倾向于重复代码。下面显示了我正在谈论的示例。如何在不重复代码的情况下编写此示例并保持响应式设计？

    <div class="col-xs-12 col-sm-9 col-md-6">
        <div class="row">
            <div class="col-sm-3 text-left hidden-xs hidden-sm visible-md visible-lg">
                <%= image_tag(@club.logo_image) %>  
            </div>
            <div class="col-sm-3 text-left hidden-xs visible-sm hidden-md hidden-lg">
                <%= image_tag(@club.logo_image) %>  
            </div>
            <div class="col-sm-3 text-center visible-xs hidden-sm hidden-md hidden-lg">
                <%= image_tag(@club.logo_image) %>  
            </div>
            <div class="col-sm-9 text-left hidden-xs hidden-sm visible-md visible-lg">
                <h2><%= @club.name %></h2>
                <h4><%= @club.stadium_name %> - <%= @club.division_and_conference %></h4>
            </div>
            <div class="col-sm-9 text-left hidden-xs visible-sm hidden-md hidden-lg">
                <h2><%= @club.name %></h2>
                <h4><%= @club.stadium_name %> - <%= @club.division_and_conference %></h4>
            </div>
            <div class="col-sm-9 text-center visible-xs hidden-sm hidden-md hidden-lg">
                <h2><%= @club.name %></h2>
                <h4><%= @club.stadium_name %></h4>
                <h4><%= @club.division_and_conference %></h4>
            </div>
        </div>
    </div>

Answer 1

通过使用 SCSS，您可以创建一个 class 并扩展其他 class。

<div class="resp-col-sm-3">
    <%= image_tag(@club.logo_image) %>  
</div>

class 看起来像：

.resp-col-sm-3 {
  @extend .col-sm-3;
  @extend .text-left; 
  @extend .hidden-xs;
  @extend .hidden-sm;
  @extend .visible-md;
  @extend .visible-lg;
}

Answer 2

另一种方法是将响应行为分解为不同的 less 文件，并根据不同的媒体查询定义 class 属性。

<div class="col-sm-3 logo-image">
    <%= image_tag(@club.logo_image) %>  
</div>

然后根据http://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm

"text-left visible-lg" 的 div 将变为

@media screen and (min-width: 922px) {
    .logo-image{
        ...css property values
    }
}

"text-center visible-xs" 的 div 将变为

@media screen and (max-width: 768px) {
    .logo-image{
        ...css property values
    }
}

这只是我个人喜欢根据不同的媒体查询组织 css 样式，而不是利用 bootstrap 框架。

如何在没有所有重复代码的情况下使用 bootstrap 的响应式设计？

How can I use bootstrap's responsive design without all the repeating code?

ruby-on-rails

responsive-design

twitter-bootstrap