使用移动设备时，从.btn-group切换到.btn-group-vertical

Question

我想实现一个引导按钮工具栏，如getbootstrap.com所示，还有一个额外的行为：当使用移动设备时，所有按钮组都应自动切换到垂直模式。

我认为最合适的解决方案如下：

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

不幸的是，代码不起作用。据我所知，只有同一媒体范围内的类可以通过这种方式扩展。

是否可以在不使用JS的情况下解决问题？

Answer 1

您可以创建自己的垂直按钮组。将自定义类.btn-vertical（或任何您想要命名的内容）添加到.btn-group。

从技术上讲，您只需要下面的CSS，但当按钮组更改为垂直方向时，您将留下第一个按钮左边框和最后一个按钮右边框圆角，这在视觉上没有吸引力。请参阅jsfiddle获取完整的CSS。

＆＃13;

＆＃13;

body {
  text-align: center;
  padding-top: 50px;
  background-color: grey;
}
@media (max-width: 768px) {
  .btn-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }
  .btn-vertical > .btn,
  .btn-group > .btn {
    position: relative;
    float: left;
  }
  .btn-vertical > .btn,
  .btn-vertical > .btn-group,
  .btn-vertical > .btn-group > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
  }
  .btn-vertical > .btn-group > .btn {
    float: none;
  }
  .btn-vertical>.btn+.btn,
  .btn-vertical>.btn+.btn-group,
  .btn-vertical>.btn-group+.btn,
  .btn-vertical>.btn-group+.btn-group {
    margin-top: -1px;
    margin-left: 0;
  }
  .btn-vertical>.btn:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  .btn-vertical>.btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .btn-vertical>.btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .btn-vertical>.btn-group:not(:first-child):not(:last-child)>.btn {
    border-radius: 0;
  }
  .btn-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,
  .btn-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .btn-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  body {
    background-color: lightblue;
  }
}
.btn-group.btn-group-lg .btn {
  border-radius: 0;
  border: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="media-change">
  <div class="container">
    <div class="btn-group btn-group-lg btn-vertical">
      <button type="button" class="btn btn-primary">Sample</button>
      <button type="button" class="btn">Sample</button>
      <button type="button" class="btn btn-danger">Sample</button>
      <button type="button" class="btn btn-warning">Sample</button>
      <button type="button" class="btn btn-success">Sample</button>
      <button type="button" class="btn btn-default">Sample</button>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;