Problem with ROW Bootstrap

Navigation
1

Hello, I'm starting bootstrap, and I'm already asking for forgiveness for ignorance in the subject, for testing some things, and I noticed that when using the grid system using class "row" there was this result :

Noticethatthebootstrapcutsmywords,andaddsascrollbar.Idonotunderstandwhy,becausewithclassrow-fluidthereisneitheradivergence,nocuts,noscrollbar.Ifpossiblealso,couldyougivemeasimpleexampleofaresponsivediv?Code:

<!doctypehtml><htmllang="en">
<head>
<title>Hello, world!</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel = "stylesheet" href = "css/bootstrap.css"/>
</head>
<body>
 <div class="row"> <!-- altera para row-fluid e o probelma desaperece -->
 <div class="span12">
 Fluid 12
 <div class="row-fluid">
 <div class="span6">
 Fluid 6
 <div class="row-fluid">
 <div class="span6">Fluid 6</div>
 <div class="span6">Fluid 6</div>
 </div>
 </div>
 <div class="span6">Fluid 6</div>
 </div>
 </div>
 </div>
 </body>
 </html>
    
asked by anonymous 01.11.2017 / 03:45

1 answer

1

Let's break it down.

  

Grid in bootstrap:   Up to version 3.3.7 See the documentation in pt-BR version 3.3.7 to have a base

In version 3.3.7 the bootstrap divides the screen into 12 equal parts, but uses percentage to be rendered for each type of screen. The calculation is quite simple to do is the amount of elements divided by the total amount, example? Let's imagine that the screen will have 12 spaces and you want to know the size of each space. 

1 / (12 * 100) = 8.333% então cada parte terá este tamanho en relação ao tamanho de tela.

Let's imagine that we have a line class="row" and we want to put 2 yellow parts and 10 blue parts in it, colored the red line to be able to differentiate. 

<div class="row alert alert-danger">
<div class="col col-md-2 alert alert-warning"> </div>
<div class="col col-md-10 alert alert-info">  </div>
</div>

Having the following result: Iusedcol-md-,toexemplifybutbootstrapworkswith4differentsettingsforeachscreensize,asshowninthetablebelow

  • col-xsforscreens<768px;
  • col-smforscreens>=768px;
  • col-mdforscreens>992px;
  • col-lgforscreens>1200px;

Bothwith12-slotgridItiscommontoworkwith2columnsondeviceslargerthan992pxcol-md-2andonthesamedivwith4columnsfordeviceswithscreenssmallerthan768pxcol-xs-4,thusgettingthecode.

<divclass="col-md-2 col-xs-4"></div>

Using this way the bootstrap renders using @media to be responsive. 

/* telas pequenas (smarphones com resoluções menores que 768px) */
@media (min-width: @screen-sm-min) { ... }

/* Telas maiores que 992px) */
@media (min-width: @screen-md-min) { ... }

This way the developer only needs to worry about following the table below.

BelowIreproduceyourscreenandthescreenthatIimaginewouldbeideal,andafterthisexampleItalkaboutbootstrap4alpha6.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
 <h1 class="alert alert-danger">
Este é o seu código
</h1>
<div class="row"> <!-- altera para row-fluid e o probelma desaperece -->
 <div class="span12">
 Fluid 12
 <div class="row-fluid">
 <div class="span6">
 Fluid 6
 <div class="row-fluid">
 <div class="span6">Fluid 6</div>
 <div class="span6">Fluid 6</div>
 </div>
 </div>
 <div class="span6">Fluid 6</div>
 </div>
 </div>
 </div>
 <br>
 <h1 class="alert alert-warning">
 Esse deve ser o resultado que você esperava
 </h1>
 <div class="row"> <!-- altera para row-fluid e o probelma desaperece -->
 <div class="col col-md-12 alert alert-warning">
 Fluid 12
 <div class="row">
 <div class="col col-md-6 alert alert-success">
 Fluid 6
 <div class="row">
 <div class="col col-md-6 alert alert-danger">Fluid 6</div>
 <div class="col col-md-6 alert alert-info">Fluid 6</div>
 </div>
 </div>
 <div class="col col-md-6 alert alert-danger">Fluid 6</div>
 </div>
 </div>
 </div>

Bootstrap v4 alpha6 ## see the grids manual , but the documentation has not yet been translated.

Already in version 4 alpha 6 the bootstrap abandons the grip model rendered by spaces and implements the flexbox making it easier to practice and organized the code.

In this bootstrap there is no longer col-xs now it has become only col- , according to the new grid table.

Grid Options

While Bootstrap uses em or rem to define most sizes, pxs is used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with font size, meaning the fonts are no longer used in px in this version and will only use em or rem to set fonts and they may maintain a proportion of size (may be higher or lower depending on the size of the screen).

In addition, it works the same way in class names.

    
01.11.2017 / 22:46
PHP numeric field validation Xamarin: Pass data from the selected item in a ListView to another screen