Question

给出以下按钮的网格布局：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<form class="form" role="form">
  <div class="form-group">
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button A1</button>
    </div>
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button A2</button>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button B1</button>
    </div>
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button B2</button>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button C1</button>
    </div>
    <div class="col-sm-6">
      <button type="button" class="btn btn-block btn-default">Button C2</button>
    </div>
  </div>
</form>

如果你在一个狭窄的视口中运行它，那么你会得到每个字母对按钮明显分组/触摸。如果您在宽视口中运行它（单击“整页”按钮），那么您将使用由列间距分隔的字母对接触编号的三元组。

无论视口大小如何，我都希望字母按钮明显在一起。我尝试翻转布局：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<form class="form" role="form">
  <div class="form-group">
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button A1</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button B1</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button C1</button>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button A2</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button B2</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-block btn-default">Button C2</button>
    </div>
  </div>
</form>

并且，毫不奇怪，现在情况正好相反：数字被分组在一个小视口中，字母被分组在一个大视口中。

是否有一种简单的方法可以让字母出现分组？我仍然希望在较大的视口大小中使用网格布局，并且我不想为此情况定义自定义规则/类。

编辑：为了让这个更清晰，我想要实现的目标是：

在狭窄的视口中，看起来就像第一个片段在狭窄的视口中所做的那样：全宽按钮按两组相同字母按钮排列，每组两个垂直分隔。
在宽视口中，看起来像宽视口中的第二个片段：三列，每列包含两个相同字母的按钮，没有垂直分隔，列之间只有水平分隔。

Answer 1

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="container">
  <form class="form" role="form">
    <div class="form-group">
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button A1</button>
      </div>
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button A2</button>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button B1</button>
      </div>
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button B2</button>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button C1</button>
      </div>
      <div class="col-sm-16">
        <button type="button" class="btn btn-block btn-default">Button C2</button>
      </div>
    </div>
  </form>
</div>

＆＃13;

Answer 2

这个片段基本上可以满足我的需求，但我不喜欢手动覆盖样式。我希望有一些更内置的东西可以做类似的事情。（而不只是添加执行相同操作的自定义CSS规则。）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<form class="form" role="form">
  <div class="row">
    <div class="col-sm-4" style="margin-bottom: 12px">
      <button type="button" class="btn btn-block btn-default">Button A1</button>
      <button type="button" class="btn btn-block btn-default" style="margin-top: 0">Button A2</button>
    </div>
    <div class="col-sm-4" style="margin-bottom: 12px">
      <button type="button" class="btn btn-block btn-default">Button B1</button>
      <button type="button" class="btn btn-block btn-default" style="margin-top: 0">Button B2</button>
    </div>
    <div class="col-sm-4" style="margin-bottom: 12px">
      <button type="button" class="btn btn-block btn-default">Button C1</button>
      <button type="button" class="btn btn-block btn-default" style="margin-top: 0">Button C2</button>
    </div>
  </div>
</form>

这个也有效，但又需要自定义样式：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<form class="form" role="form">
  <div class="row">
    <div class="col-sm-4" style="margin-bottom: 6px">
      <div class="btn-group-vertical" style="width:100%">
        <button type="button" class="btn btn-block btn-default">Button A1</button>
        <button type="button" class="btn btn-block btn-default">Button A2</button>
      </div>
    </div>
    <div class="col-sm-4" style="margin-bottom: 6px">
      <div class="btn-group-vertical" style="width:100%">
        <button type="button" class="btn btn-block btn-default">Button B1</button>
        <button type="button" class="btn btn-block btn-default">Button B2</button>
      </div>
    </div>
    <div class="col-sm-4" style="margin-bottom: 6px">
      <div class="btn-group-vertical" style="width:100%">
        <button type="button" class="btn btn-block btn-default">Button C1</button>
        <button type="button" class="btn btn-block btn-default">Button C2</button>
      </div>
    </div>
  </div>
</form>

响应地将行转换为Bootstrap网格中的列

2 个答案: