Question

使用v3.3.7

无论我多乱这一点，我似乎无法正确完成这个单选按钮。它总是看起来很奇怪......在下面的代码中，你会看到我试图将2个选项叠加在内，彼此相邻。

但它们似乎覆盖了他们的标签，而实际的输入是巨大的......

相关代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-6">
    <label>Gender</label>
    <div>
      <label class="radio-inline">
        <input type="radio" name="x_Gender" value="M" class="required form-control" title="*">
        Male
        </label>

      <label class="radio-inline">
        <input type="radio" name="x_Gender" value="F" class="required form-control" title="*">
      Female
        </label>
      </div>
    </div>

<div class="col-md-6">
    <label>Gender</label>
    <div>
      <label class="radio-inline">
        <input type="radio" name="x_Gender" value="M" class="required form-control" title="*">
        Male
        </label>

      <label class="radio-inline">
        <input type="radio" name="x_Gender" value="F" class="required form-control" title="*">
      Female
        </label>
      </div>
    </div>

LINK：https://mizrachi.coda.co.il/radio.asp

非常感谢

Answer 1

如果您想让它们像这样内联，您只需删除.form-control类。

http://getbootstrap.com/css/

默认情况下，所有带<input>的文字<textarea>，<select>和.form-control元素均设为width: 100%;。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
  <label>Gender</label>
  <div>
    <label class="radio-inline">
        <input type="radio" name="x_Gender" value="M" class="required" title="*">
        Male
    </label>
    <label class="radio-inline">
        <input type="radio" name="x_Gender" value="F" class="required" title="*">
      Female
    </label>
  </div>
</div>

＆＃13;

Answer 2

只需删除单选按钮的表单控件类。

引导单选按钮布局

2 个答案: