Bootstrap选项比输入宽

Question

我不知道为什么，但是在尺寸为1024 x 768的scrren上，我从select中选择的选项太大了。我怎么能这个选项宽度像选择？ 我想只在bootstrap 4上做这个，并且只使用bootstrap中的类，但我不知道或者有可能，我不知道为什么这个选择是这样的。在更大的屏幕尺寸上一切都很好。 怎么解决？ 这是我的代码：

  <div class="row">
        <div class="col-sm-6" style="border: 1px solid black">
            <span class="font-weight-bold">Data</span>
                <form role="form">
                    <div class="form-group">
                    <label class="control-label">Choose</label>
                    <select class="form-control" name="docType">
                        <option value="paragon">Test1</option>
                        <option value="complaint">Test2</option>
                    </select>
                    </div>
                    <div class="form-group">
                        <label for="docNo">Data</label>
                        <input type="text" class="form-control" id="docNo">
                    </div>
                    <div class="form-group">
                        <label for="docDate">Data</label>
                        <input type="text" class="form-control" id="docDate">
                    </div>
                </form>
        </div>
      <div class="col-sm-6">
       Test            
      </div>
    </div>

Answer 1

你的CSS中有什么东西强制选项是静态像素大小而不是让bootstrap的宽度只是自动吗？

Answer 2

通常，即使您使用bootstrap，options标签也不会显示大的选项，但您可以尝试使用html中所有表单元素的以下css代码来调整宽度。

.form-control
  {
    width:90%;
  }