All geek questions in one place

col and row react

I am working with Bootstrap 4 and want to do the following:

enter image description here

When I try to achieve this, the result looks like this:

enter image description here .

This happens on screens with a screen width of more than 1200 pixels. I tried to remove row and col . I did not find out what the problem is.

JS Fiddle link here .

 <div class="row"> <div class="col"> <div class="row"> <div class="col-lg-4"> <label>Text Label</label> </div> <div class="col-lg-8"> <input class="form-control input-sm" type="text"> </div> </div> </div> <div class="col"> <div class="row"> <div class="col-lg-4"> <label>Text Label</label> </div> <div class="col-lg-8"> <input class="form-control input-sm" type="text"> </div> </div> </div> <div class="col"> <div class="row"> </div> </div> ...
+4
source share
3 answers

Before using the mesh, you need to use the container first.

You can use .container if you want your lines to have a fixed width or .container-fluid if you want your lines to be full width.

For your code in the script, replace the first .row class .row one of the two classes mentioned:

Option 1: .container

 <div class="container" style="background-color: lightblue"> <!-- Row 1 --> <div class="row"> <!-- Columns and content of Row 1 --> </div> <!-- Row 2 --> <div class="row"> <!-- Columns and content of Row 2 --> </div> <div> </div>

See in action in the fiddle .

Option 2: .container-fluid

 <div class="container-fluid" style="background-color: lightblue"> <!-- Row 1 --> <div class="row"> <!-- Labels and Inputs of Row 1 --> </div> <!-- Row 2 --> <div class="row"> <!-- Labels and Inputs of Row 2 --> </div> <div> </div>

See in action in the fiddle .

See also : Grid System (Bootstrap 4 Documentation)

+2
source 
 <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> </head> <body> <main class="container"> <div class="row" style="background-color: lightblue"> <label class="col">Text Label</label><input class="col form-control" type="text"> <label class="col">Text Label</label><input class="col form-control" type="text"> <label class="col">Text Label</label><input class="col form-control" type="text"> <label class="col">Text Label</label><input class="col form-control" type="text"> <label class="col">Text Label</label><input class="col form-control" type="text"> </div> <div class="row" style="background-color: lightskyblue"> <label class="col">Text Label</label><input class="col form-control" type="text"> <label class="col">Text Label</label><input class="col form-control" type="text"> <div class="col"></div><div class="col form-control invisible"></div> <div class="col"></div><div class="col form-control invisible"></div> <div class="col"></div><div class="col form-control invisible"></div> </div> </main> </body> </html>
+2
source

The columns in Bootstrap are not responsive in the sense that they will be reasonably customizable based on the content inside (at least not always). Instead, they crash at certain breakpoints at predetermined widths.

Your <label> is long enough so that at certain control points it cannot fit on one line, and therefore ... it won’t. The easiest way to resolve this is to add additional column column classes to your HTML.

Note. You will need to view the snippet below in your larger container to see how it collapses / expands.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid" style="background-color: lightblue"> <div class="row"> <div class="col-lg-3"> <div class="row"> <label class="col-4 col-md-5 col-form-label">Text Label</label> <div class="col-8 col-md-7"> <input class="form-control input-sm" type="text"> </div> </div> </div> <div class="col-lg-3"> <div class="row"> <label class="col-4 col-md-5 col-form-label">Text Label</label> <div class="col-8 col-md-7"> <input class="form-control input-sm" type="text"> </div> </div> </div> <div class="col-lg-3"> <div class="row"> <label class="col-4 col-md-5 col-form-label">Text Label</label> <div class="col-8 col-md-7"> <input class="form-control input-sm" type="text"> </div> </div> </div> <div class="col-lg-3"> <div class="row"> <label class="col-4 col-md-5 col-form-label">Text Label</label> <div class="col-8 col-md-7"> <input class="form-control input-sm" type="text"> </div> </div> </div> <div class="col-lg-3"> <div class="row"> <label class="col-4 col-md-5 col-form-label">Text Label</label> <div class="col-8 col-md-7"> <input class="form-control input-sm" type="text"> </div> </div> </div> <div class="col-lg-3"> <div class="row"> <label class="col-4 col-md-5 col-form-label">Text Label</label> <div class="col-8 col-md-7"> <input class="form-control input-sm" type="text"> </div> </div> </div> </div> </div>
0
source

Source: https://habr.com/ru/post/1272700/

More articles:


All Articles