bootstrap 3 单选按钮破坏了 IE答案

【问题标题】：bootstrap 3 radio button broke IEbootstrap 3 单选按钮破坏了 IE
【发布时间】：2016-08-10 18:04:44
【问题描述】：

<form method="post" role="form" class="form-horizontal">
<div class="form-group">
    <div class="radio">
        <label class="control-label col-sm-2">
            <input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="startDate">
        </div>
        <div style="float:left">:</div>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="endDate">
        </div>
    </div>
</div>

我的单选按钮显示正常，带有 chrome、edge、ff，但在旧 IE 中它已损坏 - 按钮和标签没有靠在一起。

我尝试使用 jsfiddle，但使用 IE 时收音机不显示。请帮帮我。

https://jsfiddle.net/pLvop1ws/2/

【问题讨论】：

标签： html css twitter-bootstrap-3 cross-browser

【解决方案1】：

不要在form-group 类中使用复选框和单选按钮。这里我又写了一遍。请使用它并再次告诉我您的问题..

<form method="post" role="form" class="form-horizontal">
    <div class="radio">
        <label class="control-label col-sm-2">
            <input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date</label>

        <div class="form-group">
          <div class="col-sm-3">
            <input type="text" class="form-control" id="startDate">
          </div>
          <div style="float:left">:</div>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="endDate">
          </div>
      </div>
    </div>
</form>

【讨论】：

感谢您的帮助，但它不起作用，单选按钮在 IE、chrome、ff 中向右移动一点点，ff 仍然没有问题
@dev520 你的 IE 版本是多少？ 8还是9？？

【解决方案2】：

好的，试试这个。我编辑它

<form method="post" role="form" class="form-horizontal">
  <div class="radio">
    <div class="form-inline">
      <label>
        <input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date
      </label>

      <div class="form-group">
        <div class="col-sm-3">
          <input type="text" class="form-control" id="startDate">
        </div>
      </div>
      :
      <div class="form-group">
        <div class="col-sm-3">
          <input type="text" class="form-control" id="endDate">
        </div>
      </div>
    </div>
  </div>
</form>

【讨论】：

@dev520 我删除了您的单选按钮标签col-sm-2 并添加了form-inline 类。你不需要使用这个冒号 `:` 到 div。
哦，它工作，但我需要 col-sm-2 来对齐我的 from，我该怎么办
@dev520 好的，那么你必须将col-sm-2 div 类放在form-inline 类之前（别忘了给我投票）

【解决方案3】：

删除“控制标签”类并对齐
工作代码：

<form method="post" role="form" class="form-horizontal">
    <div class="form-group">
        <div class="radio">
            <label class="col-sm-2" style="padding-left:10%">
                <input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="startDate">
            </div>
            <div style="float:left">:</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="endDate">
            </div>
        </div>
    </div>
</form>

【讨论】：