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

Question

我一直在避免为这个问题找到真正的解决方案，并且经常只是牺牲我最初的目标来解决这个问题。

我喜欢使用 Bootstrap .btn-group 类。它有很多不错的用途。不幸的是，它使居中和响应变得痛苦。假设我 build 了这个。

<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，底部的导航栏包含最后两个 btn。相反，它会在顶部显示 3 个 btns，在底部显示 1 个，直到屏幕小到足以强制它像我想要的那样变成 2 x 2。

关于可能是相关的注释，我不能在不指定左边距的情况下将 btn-groups 居中，这使得宽度可变的 btns 几乎不可能。我已经尝试了文本对齐的每种组合:中心和边距:0 auto 我可以，以及添加和应用各种父级、div 和 span，并应用这些属性。我不能使用 bootstrap 网格属性，因为它破坏了 .btn-group 类的功能。

看起来 HTML 的语义使我想要的东西变得不可能，至少在没有给特定屏幕尺寸的特定 HTML 文档的情况下是这样，但我一直都知道 CSS 能够解决任何视觉问题。如何让我的导航栏适本地响应屏幕尺寸？

Answer 1

Bootstrap 调整大小系统使用填充了“12 总和”规则的行容器类。使用类

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，中等只是任意选择