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

Question

我想实现一个 Bootstrap 按钮工具栏，如 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，但是当按钮组更改为垂直方向时，您将留下第一个按钮的左边框和最后一个按钮的右边框是圆形的，这在视觉上没有吸引力。有关完整的 CSS，请参阅 jsfiddle。

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

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