0

Não consigo entender porque a label Clientes fica maior que a label Ordem sendo que as 2 foram definidas com o mesmo tamanho.

<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>

Aqui dá pra ver o problema

A ideia é alinhar a combo de Clientes com a linha de cima.

3
  • Com esse workaround é possível fazer o que quer: bootply.com/k5kXiZLoWk. Ou talvez utilizando a class="row" para separar as linhas. Commented 9/03/2017 às 14:13
  • 1
    Resolve seu problema? bootply.com/oP3XCzZzZZ. Você deve utilizar a classe .row para separar em linhas no sistema de grid. Commented 9/03/2017 às 14:34
  • @DiegoVieira Resolve sim. Posta a resposta..
    – Onaiggac
    Commented 9/03/2017 às 15:00

1 Resposta 1

1

Basta utilizar como no código abaixo. Você deve utilizar a classe .row para separar em linhas no sistema de grid. Tente seguir como na documentação do bootstrap.

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .