AnswerBun.com

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

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

inserir a descrição da imagem aqui

Gostaria que ficasse algo parecido com isso:

inserir a descrição da imagem aqui

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>

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

1 Answers

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/

inserir a descrição da imagem aqui

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!

Related Questions

$_ possui algum significado em questão?

3  Asked on December 30, 2021 by problemtico

     

Ponteiro para funções em C não está chamando

2  Asked on December 30, 2021 by igor-ptz

     

injetar beans do CDI no durante o teste usando Arquillian Chameleon

1  Asked on December 30, 2021 by danrley-alencar

         

Como manter os dados na tela ao clicar no botão voltar com Angular 8

1  Asked on December 30, 2021 by alexsandro-andrade

 

Carousel Flutter

1  Asked on December 30, 2021 by user198735

   

Dúvida na execução

3  Asked on December 30, 2021 by bruno-santana

     

Removendo o TitleBar do app android

6  Asked on December 28, 2021 by ivan-veloso

   

Erro em código básico no Kivy(Python)

2  Asked on December 28, 2021 by nielsen-rick

     

Repetição for para chamar variáveis

4  Asked on December 28, 2021 by user93774

       

Classes com associações em UML

3  Asked on December 28, 2021 by cleriston-martins-cardoso

       

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.