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

引导程序中内联形式的宽度大小

1 个答案: