0

Estou montando uma modal em bootstrap e dentro dela utilizando um formulário.

com as <div class="form-group"> dentro de cada uma dessas monto um grid, com col-xs- que a somatória da 12 (um com 2, 2 e 8) mas mesmo assim estão 'encavalando' um input no outro. O que faço de errado? não é só somar 12 e boa?

Ex: do código: https://jsfiddle.net/dorathoto/8dsnmqeu/

1
  • No BS cada linha com as 12 colunas é definida dentro de uma div com classe row. Talvez seja isso que esteja resultando no encavalamento.
    – Pagotti
    2/08/2018 às 11:48

1 Resposta 1

0

A configuração de uma linha no Bootstrap deve ficar dentro de uma div com classe row. Assim garante que não há quebra dentro daquela linha de acordo com a largura. Da forma como você definiu como se fosse uma única linha, a adaptação da resolução pode se perder.

Outra informação importante é sobre o form-group que deve englobar um input ou label + input conforme é explicado na documentação.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button data-toggle="modal" data-target="#modal-filtro"><i class="fa fa-filter" aria-hidden="true"></i> Filtros </button>

<div class="modal fade" id="modal-filtro" tabindex="-1">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title" id="exampleModalLabel">Filtros</h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">            
			<div class="row">
				<div class="col-xs-2">
					<div class="form-group">
						<div class="onoffswitch">
							<input type="checkbox" name="chkBairro" class="onoffswitch-checkbox" id="chkBairro">
							<label class="onoffswitch-label" for="chkBairro">
								<span class="onoffswitch-inner"></span>
								<span class="onoffswitch-switch"></span>
							</label>
						</div>
					</div>	
				</div>
				<div class="col-xs-2">Bairros</div>
				<div class="col-xs-8">
					<select class="form-control">
						<option>Selecione</option>
						<option>Lorem</option>
						<option>Lorem</option>
					</select>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-2">
					<div class="onoffswitch form-group">
						<input type="checkbox" name="chkEquipes" class="onoffswitch-checkbox" id="chkEquipes">
						<label class="onoffswitch-label" for="chkEquipes">
							<span class="onoffswitch-inner"></span>
							<span class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
				<div class="col-xs-2">Equipes Policiais</div>
				<div class="col-xs-8">
					<div class="form-group">
						<select class="form-control">
							<option>Selecione</option>
							<option>Lorem</option>
							<option>Lorem</option>
						</select>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-2">
					<div class="onoffswitch form-group">
						<input type="checkbox" name="chkEquipes1" class="onoffswitch-checkbox" id="chkEquipes1">
						<label class="onoffswitch-label" for="chkEquipes1">
							<span class="onoffswitch-inner"></span>
							<span class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
				<div class="col-xs-2">Equipes Policiais</div>
				<div class="col-xs-8">
					<select class="form-control">
						<option>Selecione</option>
						<option>Lorem</option>
						<option>Lorem</option>
					</select>
				</div>
			</div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Filtrar</button>
        </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 .