我如何使用Bootstrap 3.0将“btn-group btn-group-justified”置于移动视口中心

问题描述：

我在页脚的顶部添加了一个堆栈以突出显示一组常用站点链接。我建立这个网站建立在引导3.0我如何使用Bootstrap 3.0将“btn-group btn-group-justified”置于移动视口中心

我创建了一个bootply一个Concrete5 CMS主题在http://bootply.com/102065

我用从引导的“BTN-组BTN对齐”类，使按钮组以相同的尺寸拉伸并跨越其父项的整个宽度。

我还使用了<a>元素，因为本节在引导文档中有建议。

除了当我查看移动设备上的页脚网站链接时，一切看起来都很棒。（请参阅下面的屏幕截图）按钮不能缩放以适应视口。跳出容器并覆盖下一个按钮。我已经包含了一个截图。

我希望btn-group中的按钮堆叠在一起，或者正确缩放。

我想我需要添加一个媒体查询到我的css专门针对本节的移动设备例如。 @media (max-width: @screen-xs-max) { ... }

可以强制“btn-group btn-justified”组件在.col-xs上的缩放比例不同吗？

很高兴知道@Rene！ – Seilche

答

“btn-group btn-group-justified”不会因手机而中断。什么你要找的是有道理的导航设置在这里证明：

http://getbootstrap.com/examples/justified-nav/

<ul class="nav nav-justified"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Projects</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Downloads</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul>

可能更容易推出自己因为过度骑净值资产净值对齐可能是太多。这里有一些东西：http://jsbin.com/ehaRIQA/1/edit & http://jsbin.com/ehaRIQA/1/

我如何使用Bootstrap 3.0将“btn-group btn-group-justified”置于移动视口中心

相关推荐