Alignment of objects with Bootstrap

Navigation
0

I can not understand why the Customers label is larger than the Order label, with 2 being defined with the same size. 

<div id="accordion-opcoes">
 <div class="panel box">
<div class="box-header with-border">
  <h4 class="box-title">
    <a data-toggle="collapse" data-parent="#accordion-opcoes" href="#opcoes-avancadas" aria-expanded="false" class="collapsed">
      !!Opções avançadas!!
    </a>
  </h4>
</div>
<div id="opcoes-avancadas" class="panel-collapse collapse" aria-expanded="false">
  <div class="box-body">
    <div class="col-xs-12">
      <div class="form-group col-xs-12 col-sm-6">
        <label for="ord_prj" class="col-sm-3 control-label">!!Ordem!!</label>
        <div class="col-sm-9">
          <select name="ord_prj" class="form-control">
          </select>
        </div>
      </div>
      <div class="form-group col-xs-12 col-sm-6">
        <label for="sig_prj" class="col-sm-3 control-label">!!Sigla!!</label>
        <div class="col-sm-9">
          <input type="text" id="sig_prj" name="sig_prj" maxlength="24" class="form-control" placeholder="!!Sigla!!">
        </div>
      </div>
    </div>
    <div class="col-xs-12">
      <div class="form-group col-xs-12 col-sm-12">
        <label for="cli_prj" class="col-sm-3 control-label">!!Clientes!!</label>
        <div class="col-sm-9">
          <select name="cli_prj" class="form-control">
          </select>
       </div>
      </div>
    </div>
  </div>
</div>

Here you can see the problem

The idea is to align the Customer combo with the top line.

    
asked by anonymous 09.03.2017 / 15:03

1 answer

1

Just use as in the code below. You must use the .row class to separate into rows in the grid system. Try to follow as in the bootstrap documentation. 

<div id="accordion-opcoes">
  <div class="panel box">
    <div class="box-header with-border">
      <h4 class="box-title">
        <a data-toggle="collapse" data-parent="#accordion-opcoes" href="#opcoes-avancadas" aria-expanded="false" class="collapsed">
          !!Opções avançadas!!
        </a>
      </h4>
    </div>
    <div id="opcoes-avancadas" class="panel-collapse collapse" aria-expanded="false">
      <div class="row">
        <div class="col-md-2">!!Ordem!!</div>
        <div class="col-md-4">
        	<div class="form-group">
              <select name="ord_prj" class="form-control">
              </select>
          	</div>
        </div>
        <div class="col-md-2">!!Sigla!!</div>
        <div class="col-md-4">
        	<div class="form-group">
              <input type="text" class="form-control">
          	</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-2">!!Clientes!!</div>
        <div class="col-md-4">
        	<div class="form-group">
              <select name="ord_prj" class="form-control">
              </select>
          	</div>
        </div>
      </div>    
    </div>
  </div>
</div>
    
10.03.2017 / 13:31
Check value textbox x mysql (universal app win 10) [closed] Error converting Array in Ajax to Array in PHP