Pessoal Tudo bem? estou tentando fazer uma alinhamento usando bootstrap mas não esta dando certo, alguém pode me dar um help? tenho 23 perguntas e preciso colocar 4 selects ao lado. Obrigado
1 Resposta
Olá,
Você pode usar o sistema de grid do Bootstrap para separar os blocos e depois basta adicionar os itens dentro das divs.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4">
<p>Perguntar 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum laoreet mollis. Maecenas porttitor</p>
</div>
<div class="col-sm-3 col-md-2">
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-sm-3 col-md-2">
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-sm-3 col-md-2">
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-sm-3 col-md-2">
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<p>Perguntar 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum laoreet mollis. Maecenas porttitor</p>
</div>
<div class="col-sm-3 col-md-2">
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-sm-3 col-md-2">
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-sm-3 col-md-2">
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-sm-3 col-md-2">
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</div>
Recomendo dar uma olhada na documentação de grids do bootstrap: https://getbootstrap.com/docs/4.1/layout/grid/