Object alignment with Bootstrap

Asked

Viewed 510 times

0

I can not understand why the label Customers gets bigger than the label Order and the 2 were 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 Customers combo with the top line.

bootstrap-3 layout grid

  • With this workaround you can do whatever you want: http://www.bootply.com/k5kXiZLoWk. Or maybe using class="Row" to separate the lines.

  • 1

    Solve your problem? http://www.bootply.com/oP3XCzZzZZ. You must use the . Row class to separate into lines in the grid system.

  • @Diegovieira Resolve yes. Put the answer..

1 answer

1


Just use as in the code below. You must use the class .row to separate into lines in the grid system. Try following 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>

Browser other questions tagged bootstrap-3 layout grid

You are not signed in. Login or sign up in order to post.