html - 如何使用 Bootstrap 3.0 在移动视口(viewport)上居中 "btn-group btn-group-justified"

Question

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

我在 http://bootply.com/102065 创建了一个 bootply

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

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

除了我在移动设备上查看页脚站点链接时，一切看起来都很棒。 (请参阅下面的屏幕截图)按钮不会缩放以适合视口(viewport)。跳出容器并覆盖在下一步按钮上。我附上了截图。

我希望 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>

滚动你自己的可能更容易，因为覆盖导航 nav-justified 可能太多了。这是一些东西:http://jsbin.com/ehaRIQA/1/edit & http://jsbin.com/ehaRIQA/1/