3

Como posso fazer uma quebra de linha em um grid utilizando bootstrap

Pois o meu esta ficando em colunas a direita ao invés de cair, mesmo que a somatória dos divs de 12 colunas.

Acredito que estou fazendo confusões e não entendendo bem o sistema de grid deles.

<fieldset>
                    <legend>Opções</legend>

                    <div class="form-group">
                        <label for="ctl00_MainContent_txt_Ref" class="col-sm-2 control-label">Ref</label>
                        <div class="col-sm-10 input-group">
                            <input name="ctl00$MainContent$txt_Ref" type="text" id="ctl00_MainContent_txt_Ref" class="form-control" onBlur="funref(this.value)" />
                            <span id="ctl00_MainContent_lbl_UltimaRef" class="input-group-addon" style="color:#333333;font-size:X-Small;">Última ref.: 3084</span>

                            <span id="lbl_RefUtilizada" class="input-group-addon" style="color:Red;font-size:X-Small;"></span>
                        </div>
                    </div>
                      <div class="col-sm-10">
                        <div class="form-inline">
                        <div class="form-group col-sm-5">
                            <label for="ctl00_MainContent_txt_AT">Área</label>
                            <input name="ctl00$MainContent$txt_AT" type="number" id="ctl00_MainContent_txt_AT" class="form-control" placeholder="m²" />
                            <span id="ctl00_MainContent_RangeValidator7" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 99999999</span>
                        </div>
                        <div class="form-group col-sm-5">
                            <label for="ctl00_MainContent_txt_AT">Área</label>
                            <input name="ctl00$MainContent$txt_AC" type="number" id="ctl00_MainContent_txt_AC" class="form-control" placeholder="m²" />
                            <span id="ctl00_MainContent_RangeValidator9" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 99999999</span>
                        </div>
                    </div>

                        <div class="form-group">
                            <label for="ctl00_MainContent_txt_Dorm" class="col-sm-2 control-label">Q2</label>
                            <input name="ctl00$MainContent$txt_Dorm" type="number" id="ctl00_MainContent_txt_Dorm" class="form-control" />
                            <span id="ctl00_MainContent_RangeValidator5" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 999</span>
                        </div>
                        <div class="form-group">
                            <label for="ctl00_MainContent_txt_Suite" class="col-sm-2 control-label">Q1</label>
                            <input name="ctl00$MainContent$txt_Suite" type="number" id="ctl00_MainContent_txt_Suite" class="form-control" />
                            <span id="ctl00_MainContent_RangeValidator6" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 999</span>
                        </div>

                        <div class="form-group">
                            <label for="ctl00_MainContent_txt_WC" class="col-sm-2 control-label">WC</label>
                            <div class="col-sm-10">
                                <input name="ctl00$MainContent$txt_WC" type="number" id="ctl00_MainContent_txt_WC" class="form-control" />
                                <span id="ctl00_MainContent_RangeValidator1" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 999</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="ctl00_MainContent_txt_Vaga" class="col-sm-2 control-label">Vagas</label>
                            <div class="col-sm-10">
                                <input name="ctl00$MainContent$txt_Vaga" type="number" id="ctl00_MainContent_txt_Vaga" class="form-control" />
                                <span id="ctl00_MainContent_RangeValidator2" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 999</span>
                            </div>
                        </div>

                       
                          </div>
                </fieldset>
3
  • Você está utilizando apenas as classes col-sm-x, o problema é na visualização utilizando um tablet ou um desktop? Se for no desktop talvez você queira adicionar as classes col-md-x também. Commented 13/03/2015 às 17:59
  • 1
    Dorathoto seria algo assim? bootply.com/qpTOGjPAsK# Commented 13/03/2015 às 18:10
  • Quase rafael, queria aqueles campos um embaixo do outro...
    – Dorath
    Commented 23/03/2015 às 19:43

2 Respostas 2

2

Para assegurar que ele seja responsivo e ocupe o tamanho ideal basta você usar row dentro de uma <div> e dentro desta div você usar o sistema de grid de até 12 colunas.

exemplo:

<div class="row">
   <div class="col-md-4">Esquerda</div>
   <div class="col-md-4">Centro</div>
   <div class="col-md-4">Direita</div>
</div>

Documentação: getBootstrap

0

Você precisa incluir a classe row do bootstrap:

<div class="row">
  <!-- Seu código -->
</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 .