如何使不同类型的输入元素具有相同的宽度？

Question

.form-control, .custom-select {
    /* center form controls */
    display: inline-block;
    /* override Bootstrap's 100% width for form controls */
    width: auto;
}

<form action="/" method='post'>
    <br>
    <div class="form-group">
      <select name="show_ID" required="required" class="custom-select">
        <option selected>Select something</option>
        <option value="Something1">Something 1</option>
        <option value="Something2">Something 2</option>
      </select>
    </div>

  </div>
    <div class="form-group">
      <input class="form-control" name="something2" placeholder="Something 2" type="text"/>
    </div>
</form>

这里感兴趣的是两个 Bootstrap 元素.form-control和.custom-select。每个选择框的HTML看起来像这样，尽管每个选择框的选项文本的长度都不同：

如您所见，自定义选择框中的表单框彼此不匹配，表单控件框也不相同，即使两者的样式规格完全相同。

我猜这是怎么回事，因为该自动在文本框上有效，因为没有预先存在的文本可以调整该文本框的大小，但是该文本会自动转换为“基于内容”的文本框-现有文本（即自定义选择）。

在一个仅使用表单控件的HTML页面上，表单控件的自动大小调整效果很好，但是在另一页面上，我需要同时使用表单控件和自定义选择，这就是大小的问题。我曾尝试为自定义选择设置特定的尺寸（例如65％），但是即使我找到了一种方法来匹配台式机，台式机和台式机上不同尺寸的框（所有具有窗体控制框的自定义选择框）在移动设备上，它们又关闭了，因为自动意味着与手机上的65％有所不同。

如何在台式机和移动设备上使所有盒子的尺寸相同？

Answer 1

尝试一下：它对我有用。

[Here You Go:][1]


  [1]: https://jsfiddle.net/whr4yc9v/1/