SCSS bootstrap btn-group Media查询多个页面

Question

我正在研究Ruby中的应用程序。它有8页，在每一页上，总体布局是bootstrap的.container。 row .col-sm-6 .col-sm-6布局。我在第二个col-sm-6布局中有一个btn-group，在lg，xl和s设备上看起来很棒。

当屏幕落在992px-768px之间时，按钮组以令人不快的方式中断

当列在544px-768px的小屏幕上移动一列并且在xs设备上再次打破时，它可以很好地调整＆lt; 544px

。

我找到了一个很好的解决方案，我通过复制将btn-group-vertical添加到重复代码并隐藏此代码直到它检测到xs屏幕（然后隐藏水平），在xs屏幕上使btn-group垂直BTN-基）。但是，这是很多重复的代码，我必须在8页上复制，但仍然无法解决中型屏幕。

我想通过像这样添加scss来保持代码清洁：

.myClass {

    @media (max-width: 760px) {
        &:extend(.btn-group-vertical all);
    }

    @media (min-width: 761px) {
        &:extend(.btn-group all); 
    }
}

我在堆栈溢出问题31893581上找到了它。即使我认为可行的操作它也不起作用。我可以按照同一篇文章中提到的解决方案，但我不确定会有多么卫生等等。

如果有人对我如何解决一个在特定浏览器宽度上引入引导类的类或对我的问题完全不同的解决方案有任何建议，我很满意。

提前致谢。

Answer 1

我可以想到很多方法，这里有两种很容易想象的方法： https://codepen.io/panchroma/pen/XgojBL

在您希望按钮断开的位置添加clearfix div，然后使用媒体查询隐藏或显示此div。

另一种不使用clearfix的方法是在CSS中定位.btn-group，并使用媒体查询在视口768 - 992 px设置最大宽度。

祝你好运！

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-6">first col</div>
    <div class="col-sm-6">
      <div class="btn-group">
        <button type="button" class="btn btn-primary">btn-1</button>
        <button type="button" class="btn btn-primary">btn-2</button>
        <div class="cf"></div>
        <button type="button" class="btn btn-primary">btn-3</button>
        <button type="button" class="btn btn-primary">btn-4</button>
      </div>
    </div>
  </div>
</div>

CSS

.btn-group .cf{
  display:none;
}

@media (min-width: 768px) and (max-width: 992px) {
  .btn-group .cf{
    display:block;
  }
}