我想实现一个 Bootstrap 按钮工具栏,如 getbootstrap.com 所示。具有附加行为:使用移动设备时,所有按钮组都应自动切换到垂直模式。
我认为最合适的解决方案如下:
.myClass {
@media (max-width: 760px) {
&:extend(.btn-group-vertical all);
}
@media (min-width: 761px) {
&:extend(.btn-group all);
}
}
不幸的是,代码不起作用。据我了解,只有同一媒体范围内的类才能以这种方式扩展。
不使用JS是否可以解决问题?
最佳答案
您可以制作自己的垂直按钮组。添加自定义类.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>
关于twitter-bootstrap - 使用移动设备时从 .btn-group 切换到 .btn-group-vertical,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31893581/