引导程序单选按钮布局

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/

具有.form-control所有文本<input> ， <textarea>和<select>元素均设置为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> 

Answer 2

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