1

Bom dia, pessoal!

estou com dificuldade de quando o usuario minimizar a tela, os campos antes de sobrepor dentro da grid, quebrar em uma nova linha....

ps: esse espacamento entre os campos é pra ter msm...

Se alguém puder ajudar, agradeço a força!

 <div class="col-md-8">
    <div class="col-md-12">
    <div class="row form-group">

        <div class="col-md-2" style="text-align: right;">
            <label for="codigo">Codigo: </label>
        </div>
        <div class="col-md-2">
            <input type="text" id="codigo" nbInput  />
        </div>

        <div class="col-md-2" style="text-align: right;">
            <label for="ponto">Ponto: </label>
        </div>
        <div class="col-md-2">
            <input type="ponto" id="ponto" nbInput  />
        </div>

    </div>
  </div>
</div>

camopos sem minimizar:

inserir a descrição da imagem aqui

2
  • 1
    Já tentou remover essa classe da Row form-group?
    – hugocsl
    16/02/2021 às 12:57
  • oi hugocsl.. obrigado pela forca! tentei sim! quando vou minimizando ele sobrepoe... só queria que antes de sobrepor ele ja fosse pra linha de baixo :/
    – marcao1569
    16/02/2021 às 13:05

1 Resposta 1

1

Cara o que acontece é que o input precisa ter um tamanho definido, ou então ele vai assumir algum width do usar-agent etc. Então como vc quer que ele não quebre o grid é só colocar a classe w-100 no input, assim ele nunca será maior que o próprio pai e não vai encobrir os elementos ao lado.

inserir a descrição da imagem aqui

Código do exemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
  
</style>
</head>
<body>
  
<div class="container">
  <div class="row">

    <div class="col-md-4">
      col-md-4
    </div>

    <div class="col-md-8">
      <div class="row form-group">
        <div class="col-md-2" style="text-align: right;">
            <label for="codigo">Codigo: </label>
        </div>
        <div class="col-md-2">
            <input class="w-100" type="text" id="codigo" nbInput  />
        </div>
        <div class="col-md-2" style="text-align: right;">
            <label for="ponto">Ponto: </label>
        </div>
        <div class="col-md-2">
            <input class="w-100" type="ponto" id="ponto" nbInput  />
        </div>
      </div>
    </div>

  </div>
</div>

</body>
</html>

3
  • pow melhorou muito! quando eu minimizo ainda fica muito pequenos os campos é possível forçar ele jogar na linha de baixo? Obg!
    – marcao1569
    16/02/2021 às 19:48
  • 1
    @marcao1569 cara ai vc vai ter que usar o Grid com colunas mais largas, tipo col-md-6. De uma testada nisso depois
    – hugocsl
    16/02/2021 às 21:34
  • vou testar sim! muito obrigado pela ajuda!
    – marcao1569
    16/02/2021 às 22:33

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 .