0

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

Alinhamento

1
  • 1
    4 selectes ao lado de onde? Se possível coloque seu HTML e se estiver usando algum CSS além do padrão do Bootstrap coloque tb que ajuda a te responder.
    – hugocsl
    Commented 8/05/2018 às 20:14

1 Resposta 1

0

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/

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 .