Question

它是我使用Twitter Bootstrap开始的，所以这个问题可能很愚蠢，但我不知道如何解决这个问题。我想将checkbox和radiobutton放在同一行（应垂直对齐显示），但复选框和radiobutton应分组在两个独立的字段集中。我有类似的东西：http://goo.gl/GfkD6M 但复选框显示高于单选按钮，并将它们放在同一个div中不会改变任何内容。

{{1}}

Answer 1

我就这样做了：

    <div class="container">
      <div class="row">
        <div class="col-xs-6">
          <fieldset>
            <legend>
              <h3>RB:</h3>
            </legend>

            <div class="radio">
              <label>
                <input type="radio" name="optradio">Option 1</label>
            </div>

            <div class="radio">
              <label>
                <input type="radio" name="optradio">Option 2</label>
            </div>
          </fieldset>
        </div>

        <div class="col-xs-6">
          <fieldset>
            <legend>
              <h3>CB:</h3>
            </legend>

            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Option 1</label>
            </div>

            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Option 2</label>
            </div>
          </fieldset>
        </div>
      </div>
    </div>

<强> Have a look at the JSFiddle demo

Answer 2

您可以使用内联表单类here

或者您可以使用复选框类包装复选框输入，如下所示：

<div class="checkbox">
    <input type="checkbox">
</div>

使用Twitter Bootstrap在同一行中的复选框和单选按钮

2 个答案: