我有以下代码描述面板中的一个输入框和两个带有标签的选择框:
<div class="row">
<div class="container-fluid">
<div class="panel panel-info">
<div class="panel-heading">
<h1 class="panel-title"><b>Opciones de búsqueda en tarea</b></h1>
</div>
<div class="panel-body">
<form class="form-inline searchbox">
<input type="text" class="form-control" id="fname_new" placeholder="Buscar en el nombre o Descripción">
<div class="form-group">
<label for="proyect_box"> Para el proyecto: </label>
<select class="form-control" id="proyect_box">
</select>
</div>
<div class="form-group">
<label for="proyect_box"> Con el estado: </label>
<select class="form-control" id="proyect_box">
<option>Todos</option>
<option>Pendiente</option>
<option>Finalizada</option>
<option>Frenada</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
我知道在内联表单中您应该控制对象本身的宽度。所以我试着写了一些像这样的 css 代码:
.searchbox{
width: 1000px;
}
但是,无论我做什么,我都无法改变输入框的大小。我只想要输入框有更大的宽度。
我做错了什么?
最佳答案
.searchbox 是表单上的类,而不是输入上的类。如果将显式宽度附加到#fname_new(输入本身的 id),则可以更好地控制它。
因此,不要使用您拥有的 css,而是使用:
#fname_new {
width: 1000px;
}
或者,如果您希望所有文本输入具有相同的宽度,请使用
.form-control[type="text"] {
width: 1000px;
}
或者,如果您希望所有表单域(选择、输入等)具有相同的宽度,请使用
.form-control {
width: 1000px;
}
关于html - Bootstrap 中内联表单的宽度大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25939134/