bootstrap 3单选按钮打破IE

Question

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

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

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

Answer 3

删除“control-label”类并对齐 工作代码：

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