Analog bootstrap mesh width for different resolutions

Question

I wanted to figure out how the bootstrap mesh works by its example, but I just can’t figure out how to change the aquatic class for a specific resolution. Here is an example for one resolution. How would it cost to apply the same ^col-xs- for another resolution

 .row:after { display: block; clear: both; content: ''; } .row + .row { margin-top: 3%; } [class^="col-"] { float: left; margin-right: 3%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [class^="col-"]:last-child { margin-right: 0%; } .col-md-1 { width: 5.58333%; } .col-md-2 { width: 14.16667%; } .col-md-3 { width: 22.75%; } .col-md-4 { width: 31.33333%; } .col-md-5 { width: 39.91667%; } .col-md-6 { width: 48.5%; } .col-md-7 { width: 57.08333%; } .col-md-8 { width: 65.66667%; } .col-md-9 { width: 74.25%; } .col-md-10 { width: 82.83333%; } .col-md-11 { width: 91.41667%; } .col-md-12 { width: 100%; } .col-xs-1 { width: 5.58333%; } .col-xs-2 { width: 14.16667%; } .col-xs-3 { width: 22.75%; } .col-xs-4 { width: 31.33333%; } .col-xs-5 { width: 39.91667%; } .col-xs-6 { width: 48.5%; } .col-xs-7 { width: 57.08333%; } .col-xs-8 { width: 65.66667%; } .col-xs-9 { width: 74.25%; } .col-xs-10 { width: 82.83333%; } .col-xs-11 { width: 91.41667%; } .col-xs-12 { width: 100%; }

 <div class="row"> <div class="col-md-6"> col-6 </div> <div class="col-md-6"> col-6 </div> <div class="col-md-6"> col-6 </div> </div>

Accepted Answer · 2017-03-15T12:33:17

You misunderstood the concept of the Bootstrap mesh. You don't need to override the col-xs styles yourself, you need to add a div to the classes that would be responsible for displaying on other display resolutions - .col-sm, .col-md, .col-lg . It is these classes that will override the standard col-xs styles.

The essence of the grid is that in the sum all the numbers in the classes on the blocks, which should be on the same line, be 12.

That is, 6 + 6 = 12, therefore two blocks on one line. And if you want to place 4 blocks on one line, then replace with .col-lg-3 (3 + 3 + 3 + 3 = 12).

In practice, it looks like this:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">1</div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">2</div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">3</div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">4</div> </div> </div>

If, on the whole, you need Bootstrap only for the grid and you yourself want to control the resolution at which you want to change the layout and not use a bunch of classes, I would recommend using a similar grid (written in Stylus):

 .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 position relative min-height 1px padding 0 15px @media (min-width 720px) display inline-block vertical-align top @media (min-width 720px) .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 width 100% .col-5 width 83.33333333% .col-4 width 66.66666667% .col-3 width 50% .col-2 width 33.33333333% .col-1 width 16.66666667% @media (min-width 1024px) .col-12 width 100% .col-11 width 91.66666667% .col-10 width 83.33333333% .col-9 width 75% .col-8 width 66.66666667% .col-7 width 58.33333333% .col-6 width 50% .col-5 width 41.66666667% .col-4 width 33.33333333% .col-3 width 25% .col-2 width 16.66666667% .col-1 width 8.33333333%

% width of the block, and in the other should be 25%, is this addition?
The essence is now more understandable, but how to correlate the width if different resolutions.
@ddeadlink, so you need to use the bootstrap in order not to write a bunch of media queries - they are already written for the library for you.
I recommend that you open the source code of the bootstrap and see for yourself how the grid is implemented in it.

Analog bootstrap mesh width for different resolutions

1 answer 1

More articles: