1

Si observan el ejemplo en una resolución de 1024p podrán observar como el texto del label se extiende y el select pegado a la parte superior del div que le corresponde a el.

Acá el ejemplo de mi form:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <form class="form-horizontal" role="form" id="">
      <div class="form-group col-xs-12 col-sm-12 col-lg-12 col-md-12">
        <label for="editar_pro" class="control-label col-xs-2 col-sm-2 col-lg-2 col-md-2">Lineas de Producción Tales como Liquidos, Esteriles, Solidos, Etc...: </label>
        <div class="col-xs-10 col-sm-10 col-lg-10 col-md-10">
          <select id="" class="form-control" name="" style="width: 100%;"></select>
        </div>
      </div>
    </form>

    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

Veo un ejemplo que conseguí pero funciona con bootstrap 4. Fuente aquí

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="container">
<form class="form-horizontal" role="form" id="">
  <div class="row align-items-center">
        <label for="" class="control-label col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">Lineas de Producción Tales como Liquidos, Esteriles, Solidos, Etc...: </label>
        <div class=" col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">
          <select id="" class="form-control" name="" style="width: 100%;"></select>
        </div>
  </div>
</form>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" type="text/javascript"></script>

1

2 respuestas 2

3

Seguí investigando y me tope con un css que lo soluciona:

.form-group {
    display: flex;
    align-items: center;
}

Acá la demostración:

.form-group {
    display: flex;
    align-items: center;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <form class="form-horizontal" role="form" id="">
      <div class="form-group col-xs-12 col-sm-12 col-lg-12 col-md-12">
        <label for="" class="control-label col-xs-2 col-sm-2 col-lg-2 col-md-2">Lineas de Producción Tales como Liquidos, Esteriles, Solidos, Etc...: </label>
        <div class="col-xs-10 col-sm-10 col-lg-10 col-md-10">
          <select id="" class="form-control" name="" style="width: 100%;"></select>
        </div>
      </div>
    </form>

    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

2

Usa un:

class="d-flex align-items-center" 

dentro del div que lo contiene.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.