在 Bootstrap 3 中排列单选按钮，无论标签长度如何答案

【问题标题】：Line up radio buttons in Bootstrap 3, regardless of label length在 Bootstrap 3 中排列单选按钮，无论标签长度如何
【发布时间】：2014-10-14 15:01:00
【问题描述】：

我有一个面板元素，其中有 5 行单选按钮，选项 1-5。我希望所有这些行相互对齐，无论它们对应标签的宽度如何。我尝试过简单的 Bootstrap 3、jQuery UI 的位置 API 和 jQuery Mobile 的 5 列网格。

供您阅读：http://jsfiddle.net/Muzical/yjyes5rm/2/ 举个例子：

<label class="control-label">Criteria 1&nbsp;<span class="glyphicon glyphicon-question-sign" title="Tooltip"></span>
    </label>
    <div class="btn-group btn-group-sm ui-grid-d" data-toggle="buttons">
        <div class="btn btn-default ui-block-a label">
            <input class="ui-bar ui-bar-a" type="radio" name="thing1" id="criteria1Rdo1" value="1" />1</div>
        <div class="btn btn-default ui-block-b label">
            <input class="ui-bar ui-bar-a" type="radio" name="thing1" id="criteria1Rdo2" value="2" />2</div>
        <div class="btn btn-default ui-block-c label">
            <input class="ui-bar ui-bar-a" type="radio" name="thing1" id="criteria1Rdo3" value="3" />3</div>
        <div class="btn btn-default ui-block-d label">
            <input class="ui-bar ui-bar-a" type="radio" name="thing1" id="criteria1Rdo4" value="4" />4</div>
        <div class="btn btn-default ui-block-e label">
            <input class="ui-bar ui-bar-a" type="radio" name="thing1" id="criteria1Rdo5" value="5" />5</div>
    </div>

我也拒绝使用布局表，因为这简直是邪恶的，而且这不是 1998 年。我希望所有按钮都与最宽的标签对齐并且可以在移动设备上使用，可能不会更小比 iPad mini 或类似设备。

【问题讨论】：

标签： jquery html css forms twitter-bootstrap

【解决方案1】：

你需要稍微调整一下你的 html 并在表单上使用 form-horizontal 类。

http://jsfiddle.net/vandigroup/3oepryn4/1/

<form class="form-inline" role="form">
  <div class="radio">
    <label class="btn btn-default">
      <input type="radio" name="thing1"> Option 1
    </label>
    <label class="btn btn-default">
      <input type="radio" name="thing1"> Option 2
    </label>
    <label class="btn btn-default">
      <input type="radio" name="thing1"> Option 3
    </label>
    <label class="btn btn-default">
      <input type="radio" name="thing1"> Option 4
    </label>
    <label class="btn btn-default">
      <input type="radio" name="thing1"> Option 5
    </label>
  </div>
</form>

【讨论】：

Form-inline 已应用；这是一个更大的评估表的一部分。我的表单标签是<form id="form" class="form form-horizontal form-inline" role="form" enctype="application/x-www-form-urlencoded" onSubmit="return false;">
@Janet 然后简单地尝试将无线电输入放在标签的内部。然后它们应该都水平排列。
每一行都排好；那不是我的事。我的意思是每行上的所有单选按钮，我想排成一行。
对不起，我想我不明白你在做什么。使用我提供的代码使每一行上的所有单选按钮都排成一行，除非屏幕尺寸缩小到它们不完全适合的点，此时它们会换行。您是否试图完全阻止它们包装？请澄清或抛出屏幕截图，以便我可以看到您在说什么。
这是前按钮组，但你明白了：link 我通常不喜欢解释任何事情......所以那不是你。

【解决方案2】：

我是个白痴；破解 Bootstrap 3 的列标签似乎已经足够好（好吧，IE 很痛苦，但是......）

http://www.bootply.com/qy6Iag0Z9E

【讨论】：