.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%有所不同。
如何使所有盒子的尺寸相同-在台式机和移动设备上?
尝试:它对我有用。
[Here You Go:][1]
[1]: https://jsfiddle.net/whr4yc9v/1/