SCSS引导btn-组媒体查询多页

Question

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

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

​

​

当列在小屏幕544px-768px上一列在另一列上移动时，它可以很好地调整，并且在xs设备< 544px上再次损坏

​

。

我已经找到了一个很好的解决方案，我通过复制代码，在复制的代码中添加btn-group-vertical，并隐藏此代码，直到它检测到xs屏幕(然后隐藏水平btn-group)，从而使btn-group在xs屏幕上垂直显示。然而，这是许多重复的代码，我必须在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。

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

祝好运!

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;
  }
}