html - Bootstrap 中内联表单的宽度大小

Question

我有以下代码描述面板中的一个输入框和两个带有标签的选择框:

  <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;
}

但是，无论我做什么，我都无法改变输入框的大小。我只想要输入框有更大的宽度。

我做错了什么？

Answer 1

.searchbox 是表单上的类，而不是输入上的类。如果将显式宽度附加到#fname_new(输入本身的 id)，则可以更好地控制它。

因此，不要使用您拥有的 css，而是使用:

#fname_new {
    width: 1000px;
}

或者，如果您希望所有文本输入具有相同的宽度，请使用

.form-control[type="text"] {
    width: 1000px;
}

或者，如果您希望所有表单域(选择、输入等)具有相同的宽度，请使用

.form-control {
    width: 1000px;
}