grid usage of bootstrap

It's very convenient
div uses container to wrap, and then sets the row in it. After setting the row, set the column to quickly build the framework

<div class="container">
            <h1>Hello, world!</h1>
         
            <div class="row">
                <div class="col-md-1"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                    1 in the first column md
                    </p>
                </div>
         
                <div class="col-md-2" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        This is the second row, two md
                    </p>
                </div>
                <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>The last one md Accounting for 9 columns
                        </p>
                </div>
            </div>
        </div>

The total number of guarantees is 12. You can see the change by dragging the browser to change the width.
In addition, the screen size will also affect. At this time, the large col should be used for the column class. You can see the change by dragging the browser.

<div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    //Medium 6, large 4
                </div>
                <div class="col-md-6 col-lg-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    //Medium 6, large 8
                </div>
            </div>
        </div>

Overall grid size distribution
. col XS ultra small screen mobile phone (< 768px)
. col SM small screen panel (≥ 768px)
. col MD medium screen desktop display (≥ 992px)
. col LG large screen large desktop display (≥ 1200px)

Tags: Mobile

Posted on Sun, 01 Dec 2019 04:44:49 -0800 by djkanebo