Question

我在页脚的顶部添加了一个堆栈，以突出显示一组常用站点链接。我正在使用基于Bootstrap 3.0构建的Concrete5 CMS主题构建此站点

我在http://bootply.com/102065

创建了一个bootply

我使用了Bootstrap中的“btn-group btn-justified”类来使按钮组以相同的大小拉伸并跨越其父级的整个宽度。

我还使用了本节中的<a>元素已在bootstrap文档中提供建议。

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

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

我假设我需要向我的css添加媒体查询，专门针对此部分的移动设备防爆。 @media (max-width: @screen-xs-max) { ... }

“btn-group btn-justified”组件是否可以强制在.col-xs上进行不同的缩放？

Answer 1

“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＆amp; http://jsbin.com/ehaRIQA/1/

如何使用Bootstrap 3.0在移动视口中居中“btn-group btn-group-justified”

1 个答案: