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!

Recent Answers

Lex on Does Google Analytics track 404 page responses as valid page views?
Jon Church on Why fry rice before boiling?
Peter Machado on Why fry rice before boiling?
Joshua Engel on Why fry rice before boiling?
haakon.io on Why fry rice before boiling?