Question

我一直在避免找到这个问题的真正解决方案，而且往往只是牺牲我最初想要绕过它的目标。

我喜欢使用Bootstrap .btn-group类。它有很多不错的用途。不幸的是，它使居中和响应成为一种痛苦。说我建了这个。

<div id="nav-bar" class="btn-group" role="group">
  <a class="nav-btn btn btn-default" >example 1</a>
  <a class="nav-btn btn btn-default" >example 2</a>
  <a class="nav-btn btn btn-default" >example 3</a>
  <a class="nav-btn btn btn-default" >example 4</a>
</div>

当屏幕变小时，整个条形图可能不合适，在这种情况下我会想要两个导航条，顶部一个带有前两个btns，底部一个带有最后两个btns。取而代之的是它在顶部显示3个bt，在底部显示1个，直到屏幕小到足以迫使它像我想要的那样2比2。

关于什么可能是一个相关的注释，我不能指定btn-groups而不指定左边距，使得变宽的btns几乎不可能..我已经尝试了text-align：center和margin的每个组合：0我可以自动，以及添加和应用各种父，div和span，并应用这些属性。我无法使用bootstrap网格属性，因为它会破坏.btn-group类的功能。

看起来HTML的语义正在使我想要的东西变得不可能，至少在没有给某些HTML文档提供某些屏幕尺寸的情况下，但我总是知道CSS能够解决任何视觉问题。如何让导航栏对屏幕尺寸做出适当的响应？

Answer 1

引导程序大小调整系统使用的行容器类填充了＆＃34; 12 sum＆＃34;规则。使用类

COL-XS-的 X ; COL-XM-<强> X ; COL-MD- <强> X ; COL-LG- <强> X

其中x是整数1 <= x <= 12

此整数确定行中列的宽度，作为整体的一部分 - 总共12个部分。中间字符表示行将转换为列的大小（从1x4到4x1），即调整自身以进行更窄的显示。这里给出了每种屏幕尺寸： http://getbootstrap.com/css/#grid

我建议您使用此行/列系统创建一个表，一旦达到所需的屏幕大小，该表将从1x4移动到2x2。这是一个骨架：

<div class='row'> 1x4 <div class='col-md-6'> 2x2 anchor1 anchor2 </div> <div class='col-md-6'> anchor3 anchor4 </div> </div>

这将使一个按钮组以1x4开始，然后一旦达到中等屏幕尺寸就转换为2x2，中等只是一个任意选择

Answer 2

进行媒体查询

@media only screen and (max-width : 480px) {
    .nav-btn{
        width:50%;
        }
}

小提琴： http://jsfiddle.net/52VtD/9481/

如何使bootstrap btn-group自然地分成两半

2 个答案: