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

问题描述 投票:0回答:1

.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看起来像这样,尽管每个选择框的选项文本的长度都不同:

enter image description here

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

我猜发生了什么事,因为该文本框上没有自动存在的文本,因此该自动对文本框有效,但是该文本框会自动翻译为“基于内容”,现有文本(即自定义选择)。

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

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

html css twitter-bootstrap html-input
1个回答
0
投票

尝试:它对我有用。

[Here You Go:][1]


  [1]: https://jsfiddle.net/whr4yc9v/1/
© www.soinside.com 2019 - 2024. All rights reserved.