All geek questions in one place

Why wrap the boot grid column

When the image below is displayed in the browser, the last column of the first row is wrapped, however, none of the columns in the second row will be wrapped when the browser width is reduced. I got the impression that if the col-xs- * class is used, the columns do not add up. What do I need to do so that the last column of the first row does not turn around?

<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" 
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />   
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-1">
                a
            </div>
            <div class="col-xs-10">
                bbb
            </div>
            <div class="col-xs-1">
                c
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
                a
            </div>
            <div class="col-xs-8">
                bbb
            </div>
            <div class="col-xs-2">
                c
            </div>
        </div>
    </div>
  </body>
</html>
+4
source share
1 answer

This is because the first column containing "a" exceeds 1/12 of the width of the viewport as soon as you scale the screen to a certain width, even if it is specified as .col-xs-1.

, Bootstrap padding 15px . 30 , , . , 30 , (1/12 ).

, 30px * 12 = 360px. 1/12 , .row , , .

? .col-xs-1, . xs/sm ( ), 1 .

, ! , .

+1

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

More articles:


All Articles