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>
col-sm-x
, o problema é na visualização utilizando um tablet ou um desktop? Se for no desktop talvez você queira adicionar as classescol-md-x
também.