2015-10-06 35 views
1

我有一个合理的按钮组和6个按钮。如何创建一个合理的菜单,使用Bootstrap在移动设备上堆叠?

http://getbootstrap.com/components/#btn-groups-justified

它看起来不错,但在移动,我想使它堆到基本成为垂直的按钮组是btn-block

有没有一种很酷的方式来实现这一目标?我必须创建两个,并隐藏/显示不同的大小?

+0

这是什么关系了flexbox? –

+0

[Bootstrap Responsive Button Group Justified]的可能副本(http://stackoverflow.com/questions/24118144/bootstrap-responsive-button-group-justified) – jaunt

+0

http://getbootstrap.com/css/#responsive-utilities – GillesC

回答

0

您需要添加自己的响应式CSS,它会覆盖Bootstrap风格的移动视图。

See this sample on codepen

@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; 
    } 
} 
相关问题