Как совместить метки с входами, используя bootstrap?

Question

Я пытаюсь выровнять эту форму

И я хотел бы получить что-то подобное

Всегда метка занимает другое место ... и не удерживается с вводом ... как я могу работать с этим?

Я использую этот код

<div class="form-group col-xs-3 col-md-4" >
        <label class="control-label col-md-4" >Rif: </label>
        <div class="col-md-8">
         <input type="text" name="rif" id="rif" class="form-control" />
        </div>
       </div>

       <div class="form-group col-xs-3 col-md-4">
        <label class="control-label col-md-4">Empresa: </label>
        <div class="col-md-8">
         <input type="text" name="razon_social" id="razon_social" class="form-control" />
        </div>
       </div>

       <div class="form-group col-xs-3 col-md-4">
        <label class="control-label col-md-4">Rif.Holding: </label>
        <div class="col-md-8">
        <select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
        <option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 1</option>
        <option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 2</option>
        <option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 3</option>
        <option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 4</option>
        <option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 5</option>
        </select>
        </div>
       </div>

        <div class="form-group col-xs-3 col-md-4">
        <label class="control-label col-md-4">Nom.Holding:</label>
        <div class="col-md-8">
        <select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
        <option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 1</option>
        <option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 2</option>
        <option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 3</option>
        <option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 4</option>
        <option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 5</option>
        </select>
        </div>
       </div>

       <div class="form-group col-xs-3 col-md-4">
        <label class="control-label col-md-4">PIN: </label>
        <div class="col-md-8">
        <select name="fk_pin_id" id="fk_pin_id" class="form-control">
        <option value="1" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 1</option>
        <option value="2" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 2</option>
        <option value="3" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 3</option>
        <option value="4" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 4</option>
        <option value="5" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 5</option>
        </select>
        </div>
       </div>

       <div class="form-group col-xs-3 col-md-4">
        <label class="control-label col-md-4">Cartera: </label>
        <div class="col-md-8">
        <select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
        <option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
        <option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
        <option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
        <option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
        <option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
        </select>
        </div>
       </div>

Как я могу выровнять эти элементы без потери формата? Кто-нибудь может мне помочь?

Answer 1

Здесь у вас есть нечто похожее на то, что вы ищете:

<form>
  <div class="form-row justify-content-between">
    <div class="form-group row col-md-4">
      <label class="col-sm-4 col-form-label">Rif: </label>
      <div class="col-sm-8">
        <input type="text" name="rif" id="rif" class="form-control" />
      </div>
    </div>

    <div class="form-group row col-md-8">
      <label class="col-sm-2 col-form-label">Empresa: </label>
      <div class="col-sm-10">
        <input type="text" name="razon_social" id="razon_social" class="form-control" />
      </div>
    </div>
  </div>

  <div class="form-row justify-content-between">
    <div class="form-group row col-md-4">
      <label class="col-sm-4 col-form-label">Rif.Holding: </label>
      <div class="col-sm-8">
        <select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
          <option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 1</option>
          <option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 2</option>
          <option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 3</option>
          <option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 4</option>
          <option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 5</option>
        </select>
      </div>
    </div>

    <div class="form-group row col-md-8">
      <label class="col-sm-2 col-form-label">Nom.Holding: </label>
      <div class="col-sm-10">
        <select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
          <option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 1</option>
          <option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 2</option>
          <option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 3</option>
          <option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 4</option>
          <option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 5</option>
        </select>
      </div>
    </div>
  </div>

  <div class="form-row justify-content-between">
    <div class="form-group row col-md-4">
      <label class="col-sm-4 col-form-label">PIN: </label>
      <div class="col-sm-8">
        <select name="fk_pin_id" id="fk_pin_id" class="form-control">
          <option value="1" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 1</option>
          <option value="2" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 2</option>
          <option value="3" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 3</option>
          <option value="4" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 4</option>
          <option value="5" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 5</option>
        </select>
      </div>
    </div>

    <div class="form-group row col-md-4">
      <label class="col-sm-4 col-form-label">Cartera: </label>
      <div class="col-sm-8">
        <select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
          <option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
          <option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
          <option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
          <option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
          <option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
        </select>
      </div>
    </div>

    <div class="form-group row col-md-4">
      <label class="col-sm-4 col-form-label">Cartera: </label>
      <div class="col-sm-8">
        <select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
          <option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
          <option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
          <option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
          <option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
          <option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
        </select>
      </div>
    </div>
  </div>
</form>

Answer 2

просто добавьте class = "row" в каждый div группы формы

  <div class="row col-12">
        <div class="form-group row col-xs-3 col-md-4 row " >
            <label class="control-label col-md-4" >Rif: </label>
            <div class="col-md-8">
             <input type="text" name="rif" id="rif" class="form-control" />
            </div>
           </div>

           <div class="form-group row col-xs-3 col-md-4">
            <label class="control-label col-md-4">Empresa: </label>
            <div class="col-md-8">
             <input type="text" name="razon_social" id="razon_social" class="form-control" />
            </div>
           </div>
    </div>

   <div class="row col-12">
    <div class="form-group row col-xs-3 col-md-4">
        <label class="control-label col-md-4">Rif.Holding: </label>
        <div class="col-md-8">
        <select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
        <option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 1</option>
        <option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 2</option>
        <option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 3</option>
        <option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 4</option>
        <option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 5</option>
        </select>
        </div>
       </div>

        <div class="form-group row col-xs-3 col-md-4">
        <label class="control-label col-md-4">Nom.Holding:</label>
        <div class="col-md-8">
        <select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
        <option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 1</option>
        <option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 2</option>
        <option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 3</option>
        <option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 4</option>
        <option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 5</option>
        </select>
        </div>
       </div>
   </div>

   <div class="row">

   <div class="form-group row col-xs-3 col-md-4">
    <label class="control-label col-md-4">PIN: </label>
    <div class="col-md-8">
    <select name="fk_pin_id" id="fk_pin_id" class="form-control">
    <option value="1" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 1</option>
    <option value="2" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 2</option>
    <option value="3" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 3</option>
    <option value="4" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 4</option>
    <option value="5" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 5</option>
    </select>
    </div>
   </div>

   <div class="form-group row col-xs-3 col-md-4">
    <label class="control-label col-md-4">Cartera: </label>
    <div class="col-md-8">
    <select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
    <option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
    <option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
    <option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
    <option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
    <option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
    </select>
    </div>
   </div>

   <div class="form-group row col-xs-3 col-md-4">
    <label class="control-label col-md-4">Cartera: </label>
    <div class="col-md-8">
    <select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
    <option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
    <option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
    <option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
    <option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
    <option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
    </select>
    </div>
   </div>
   </div>