0

Necesito alinear un select con 2 buttons, estoy usando bootsrap4 para ello.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form method="post">
  <input type="hidden" name="csrfmiddlewaretoken"
         value="W4MYtpavrwZOYBEQk8PhizBun6vfIFgFNAK7EqbEqGaaxMUNkxP4R3V1ZVIrwxcO">
  <fieldset>
    <legend class="m-b-15">Datos del solicitante</legend>
    <div class="row">
      <div class="col-8">
        <div class="input-group">
          <div id="div_id_solicitante" class="form-group">
            <label for="id_solicitante" class="col-form-label  requiredField">
              Solicitante<span class="asteriskField">*</span>
            </label>
            <div class="">
              <select name="solicitante" class="select form-control" required="" id="id_solicitante">
                <option value="" selected="">---------</option>
                <option value="3">11111111-1 - Facultad de química</option>
                <option value="1">22222222-2 - Clientes de prueba</option>
              </select>
            </div>
          </div>
          <span class="input-group-btn">
                  <button type="button" class="btn btn-sm btn-warning">Editar</button>
                  <button type="button" class="btn btn-sm btn-success">Agregar</button>
          </span>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend class="m-b-15">Datos del agricultor</legend>
    <div class="row">
      <div class="col-6">
        <div id="div_id_agricultor" class="form-group">
          <label for="id_agricultor" class="col-form-label  requiredField">
            Agricultor<span class="asteriskField">*</span>
          </label>
          <div class="">
            <select name="agricultor" class="select form-control" required="" id="id_agricultor">
              <option value="" selected="">---------</option>
              <option value="3">11111111-1 - Facultad de química</option>
              <option value="1">22222222-2 - Clientes de prueba</option>
            </select>
          </div>
        </div>
        <div id="div_id_tipo_cargo" class="form-group">
          <label for="id_tipo_cargo" class="col-form-label  requiredField">
            Tipo de cargo<span class="asteriskField">*</span>
          </label>
          <div class="">
            <select name="tipo_cargo" class="select form-control" required="" id="id_tipo_cargo">
              <option value="" selected="">---------</option>
              <option value="BO">Boleta</option>
              <option value="FA">Factura</option>
              <option value="CI">Cobro Interno</option>
              <option value="SC">Sin Cobro</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <button type="submit" class="btn btn-success">Guardar</button>
</form>
</div>

Este es el link a jsfiddle

2
  • A pesar de que te respondieron, te aconsejaría fuertemente usar bootstrap en su totalidad... para realizar lo que quieres NO necesitas crear estilos nuevos, y ordenar un poco tu maquetacion HTML también.. esta muy confusa y existen elementos que sobran ;) el 19 dic. 2018 a las 18:23
  • Traté de ordenarlo lo más que pude, es html generado por django-crispy-forms. Gracias por tu observación.
    – Marcelo
    el 19 dic. 2018 a las 19:51

1 respuesta 1

0

Debes de poner el <label> de título del <select> fuera:

El .form-group es para un elemento con su título o sin el, pero no los esas dos formas a la vez. Si añades elementos con título y otros elementos sin título puede dar problemas de aspecto.

Enlace a los forms de ejemplo de como se usan.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form method="post">
  <input type="hidden" name="csrfmiddlewaretoken"
         value="W4MYtpavrwZOYBEQk8PhizBun6vfIFgFNAK7EqbEqGaaxMUNkxP4R3V1ZVIrwxcO">
  <fieldset>
    <legend class="m-b-15">Datos del solicitante</legend>
    <div class="row">
      <div class="col-xs-12">
        <label for="id_solicitante" class="col-form-label col-xs-12"  requiredField">
            Solicitante<span class="asteriskField">*</span>
        </label>
        <div class="input-group">
          <div id="div_id_solicitante" class="form-group">   
            <div class="">
              <select name="solicitante" class="select form-control" required="" id="id_solicitante">
                <option value="" selected="">---------</option>
                <option value="3">11111111-1 - Facultad de química</option>
                <option value="1">22222222-2 - Clientes de prueba</option>
              </select>
            </div>
          </div>
          <span class="input-group-btn">
                  <button type="button" class="btn btn-sm btn-warning">Editar</button>
                  <button type="button" class="btn btn-sm btn-success">Agregar</button>
          </span>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend class="m-b-15">Datos del agricultor</legend>
    <div class="row">
      <div class="col-6">
        <div id="div_id_agricultor" class="form-group">
          <label for="id_agricultor" class="col-form-label  requiredField">
            Agricultor<span class="asteriskField">*</span>
          </label>
          <div class="">
            <select name="agricultor" class="select form-control" required="" id="id_agricultor">
              <option value="" selected="">---------</option>
              <option value="3">11111111-1 - Facultad de química</option>
              <option value="1">22222222-2 - Clientes de prueba</option>
            </select>
          </div>
        </div>
        <div id="div_id_tipo_cargo" class="form-group">
          <label for="id_tipo_cargo" class="col-form-label  requiredField">
            Tipo de cargo<span class="asteriskField">*</span>
          </label>
          <div class="">
            <select name="tipo_cargo" class="select form-control" required="" id="id_tipo_cargo">
              <option value="" selected="">---------</option>
              <option value="BO">Boleta</option>
              <option value="FA">Factura</option>
              <option value="CI">Cobro Interno</option>
              <option value="SC">Sin Cobro</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <button type="submit" class="btn btn-success">Guardar</button>
</form>
</div>

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.