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

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-horizo​​ntal。

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>