1
我有一个合理的按钮组和6个按钮。如何创建一个合理的菜单,使用Bootstrap在移动设备上堆叠?
http://getbootstrap.com/components/#btn-groups-justified
它看起来不错,但在移动,我想使它堆到基本成为垂直的按钮组是btn-block
!
有没有一种很酷的方式来实现这一目标?我必须创建两个,并隐藏/显示不同的大小?
我有一个合理的按钮组和6个按钮。如何创建一个合理的菜单,使用Bootstrap在移动设备上堆叠?
http://getbootstrap.com/components/#btn-groups-justified
它看起来不错,但在移动,我想使它堆到基本成为垂直的按钮组是btn-block
!
有没有一种很酷的方式来实现这一目标?我必须创建两个,并隐藏/显示不同的大小?
您需要添加自己的响应式CSS,它会覆盖Bootstrap风格的移动视图。
@media (max-width: 768px) {
.btn-group-justified-responsive > .btn,
.btn-group-justified-responsive > .btn-group {
display: block;
width: auto;
margin: 0 !important;
}
.btn-group-justified-responsive > .btn-group > .btn {
border-radius: 0;
}
.btn-group-justified-responsive > .btn-group:not(:last-child) > .btn {
border-bottom: none;
}
.btn-group-justified-responsive > .btn-group:first-child > .btn:first-child {
border-top-left-radius: 5px !important;
}
.btn-group-justified-responsive > .btn-group:first-child > .btn:last-child {
border-top-right-radius: 5px !important;
}
.btn-group-justified-responsive > .btn-group:last-child > .btn:first-child {
border-bottom-left-radius: 5px !important;
}
.btn-group-justified-responsive > .btn-group:last-child > .btn:last-child {
border-bottom-right-radius: 5px !important;
}
}
这是什么关系了flexbox? –
[Bootstrap Responsive Button Group Justified]的可能副本(http://stackoverflow.com/questions/24118144/bootstrap-responsive-button-group-justified) – jaunt
http://getbootstrap.com/css/#responsive-utilities – GillesC