Bootstrap breaking line

Asked

Viewed 1,627 times

0

I am mounting a modal in bootstrap and inside it using a form.

with the <div class="form-group"> within each of these sets a grid, with col-Xs- that the sum of 12 (one with 2, 2 and 8) but still are 'encavalando' an input in the other. What do I do wrong? It’s not just add up 12 and good?

Ex: of the code: https://jsfiddle.net/dorathoto/8dsnmqeu/

html twitter-bootstrap

  • In the BS each row with the 12 columns is defined within one div classy row. Maybe that’s what’s resulting in the pipeline.

1 answer

0


Setting up a line in Bootstrap should be within a div classy row. This ensures that there is no break within that line according to the width. The way you define it as a single line, the resolution adaptation can get lost.

Other important information is about the form-group which must include an input or label + input as explained in documentation.

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

Browser other questions tagged html twitter-bootstrap

You are not signed in. Login or sign up in order to post.