By minimizing Bootstrap grid screen does not break to a new line

Question

By minimizing Bootstrap grid screen does not break to a new line

Asked 3 years, 9 months ago

Viewed 40 times

1

Good morning, you guys!

I am having difficulty when the user minimize the screen, fields before overlapping within the grid, break into a new line....

ps: this spacing between the fields is to have msm...

If anyone can help, I appreciate the strength!

 <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>

1

Have you tried removing this class from the Row form-group?

– hugocsl

2021/02/16 at 12:57
hi hugocsl.. thanks for the gallows! I tried yes! when I minimize it overlap and... I just wish before I overlap it would already go down the line :/

– marcao1569

2021/02/16 at 13:05

1 answer

Browser other questions tagged html css front-end bootstrap-4

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2021-02-16T15:40:21+00:00

Man what happens is that the input needs to have a set size, or else it will take on some width of agent etc. So how do you want him not to break the grid just put the class w-100 in the input, so he’ll never be bigger than his own father and won’t cover up the elements next door.

Example code

<!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>