Como alterar disposição dos Radio Buttons no layout responsivo com Bootstrap ou outra ferramenta?

Stack Overflow em Português Asked on December 29, 2020

Atualmente quando o site fica em modo mobile/reduzido a uma certa resolução os Radio Buttons automaticamente se posicionam da seguinte forma:

Gostaria que ficasse algo parecido com isso:

Parte do código Html:

 <div class="row" style="padding-left: 15%;">

                <div class="col-sm-2">

                    <input type="radio" id="1" name="quartos" value="1" class="RadionQuarto">
                    <label for="1">1</label><br>

                </div>

                <div class="col-sm-2">

                    <input type="radio" id="2" name="quartos" value="2" class="RadionQuarto">
                    <label for="2">2</label><br>

                </div>

                <div class="col-sm-2">
                    <input type="radio" id="3" name="quartos" value="3" class="RadionQuarto">
                    <label for="3">3</label><br>

                </div>
                <div class="col-sm-2">
                    <input type="radio" id="4" name="quartos" value="4" class="RadionQuarto">
                    <label for="4">4</label><br>

                </div>
                <div class="col-sm-2">

                    <input type="radio" id="5" name="quartos" value="5" class="RadionQuarto">
                    <label for="5">5</label><br>

                </div>

            </div>

html javascript layout responsivo twitter bootstrap

One Answer

Cara é só trocar col-sm-2 por apenas col-2 assim elas nunca vão ficar uma abaixa do outra e se manterão na mesma linha. Já que vc está usando o Bootstrap, sugiro fortemente que vc estude as classes do Grid dele https://getbootstrap.com/docs/4.4/layout/grid/

Código da imagem acima:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="row" style="padding-left: 15%;">

  <div class="col-2">

      <input type="radio" id="1" name="quartos" value="1" class="RadionQuarto">
      <label for="1">1</label><br>

  </div>

  <div class="col-2">

      <input type="radio" id="2" name="quartos" value="2" class="RadionQuarto">
      <label for="2">2</label><br>

  </div>

  <div class="col-2">
      <input type="radio" id="3" name="quartos" value="3" class="RadionQuarto">
      <label for="3">3</label><br>

  </div>
  <div class="col-2">
      <input type="radio" id="4" name="quartos" value="4" class="RadionQuarto">
      <label for="4">4</label><br>

  </div>
  <div class="col-2">

      <input type="radio" id="5" name="quartos" value="5" class="RadionQuarto">
      <label for="5">5</label><br>

  </div>

</div>

Correct answer by hugocsl on December 29, 2020

Add your own answers!

Ask a Question

Get help from others!