Question

我有一个面板元素，其中有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或类似设备小。

Answer 1

您需要稍微调整一下html并在表单上使用form 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>

Answer 2

我是个白痴;黑客Bootstrap 3的列标签似乎运行得很好（好吧，IE很痛苦，但......）

http://www.bootply.com/qy6Iag0Z9E

无论标签长度如何，都将Bootstrap 3中的单选按钮对齐

2 个答案: