Bootstrap Grid for Form

Navigation
3

How can I make a line break in a grid using bootstrap

Well, mine is getting right columns instead of falling, even though the sum of the 12 column divs.

I think I'm confusing and misunderstanding their grid system. 

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

                    <div class="form-group">
                        <label for="ctl00_MainContent_txt_Ref" class="col-sm-2 control-label">Referência</label>
                        <div class="col-sm-10 input-group">
                            <input name="ctl00$MainContent$txt_Ref" type="text" id="ctl00_MainContent_txt_Ref" class="form-control" placeholder="Referência do imóvel, opcional." 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 Total</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 construída </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">Dormitórios</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">Suítes</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">Banheiros</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 na garagem</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>

Sample code above: link

    
asked by anonymous 13.03.2015 / 18:46

2 answers

0

You need to include the row of bootstrap class: 

<div class="row">
  <!-- Seu código -->
</div>
    
13.03.2015 / 19:03
1

To ensure that it is responsive and occupy the ideal size you just have to use row within a <div> and within this div you use the grid system up to 12 columns.

example: 

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

Documentation: getBootstrap

    
13.03.2015 / 21:10
How to get the signature of changed methods in a commit Error of font-face when publishing project [closed]