javascript - Bootstrap输入组无法在jQuery UI对话框中正确呈现

我有一个数字字段，每边有两个按钮用于递增/递减。
它在不在jQuery UI对话框中时呈现良好，如下所示：
在Jquery对话框之外：

在Jquery对话框中：

代码：
HTML格式：

<div class="form-group">
  <div class="col-sm-8">
    <div class="input-group">
      <div class="input-group-btn">
        <button class="btn btn-default" data-type="increment_FILEALERTMINS">
          <i class="glyphicon glyphicon-plus">
                        </i>
        </button>
      </div>
      <input type="number" class="form-control" required id="FILEALERTMINS" name="FILEALERTMINS" placeholder="Enter FILEALERTMINS"/>
      <div class="input-group-btn">
        <button class="btn btn-default" data-type="decrement_FILEALERTMINS">
          <i class="glyphicon glyphicon-minus">
                        </i>
        </button>
      </div>
    </div>
  </div>
</div>

JS公司：

$(function() {
  $(".form-group").dialog(); // comment this out to see it working properly!
})

可复制小提琴：
https://jsfiddle.net/sajjansarkar/qr2zc4nj/

最佳答案

这里有一个解决方案https://jsfiddle.net/qr2zc4nj/2/

$(function(){
  $(".form-group").dialog();
})

.glyphicon{
  font-size: 20px;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="form-group">
  <label class="control-label col-sm-3" for="FILEALERTMINS">
    FILEALERTMINS:
  </label>
  <div class="col-sm-8">
    <div class="input-group">
      <div class="input-group-btn">
        <button class="btn btn-default" data-type="increment_FILEALERTMINS">
          <i class="glyphicon glyphicon-plus">
						</i>
        </button>
      </div>
      <input type="number" class="form-control" required id="FILEALERTMINS" name="FILEALERTMINS" placeholder="Enter FILEALERTMINS"/>
      <div class="input-group-btn">
        <button class="btn btn-default" data-type="decrement_FILEALERTMINS">
          <i class="glyphicon glyphicon-minus">
						</i>
        </button>
      </div>
    </div>
  </div>
</div>

您需要将font-size添加到。glyphicon。
希望这对你有帮助。

关于javascript - Bootstrap输入组无法在jQuery UI对话框中正确呈现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46177812/