引导单选按钮布局

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>

链接:https://mizrachi.coda.co.il/radio.asp

非常感谢

Answer 1

.form-control如果您希望它们像这样内联,您只需要删除它们.

http://getbootstrap.com/css/

默认情况下,所有textual <input>和<textarea>,<select>with .form-control都设置为width: 100%;.

<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>