search

mobi-css / mobi.css

A lightweight, scalable, mobile-first CSS framework
http://getmobicss.com/
MIT License
2.34k stars 145 forks source link

col will overflow row #26

Closed guyskk closed 7 years ago

guyskk commented 7 years ago

col and the pre element will overflow row

<body>
    <div class="flex-center">
        <div class="container">
            <nav>
                <button class="btn" type="button" name="button">Header</button>
            </nav>
            <div class="row">
                <div class="col-1-4 hide-on-mobile" style="padding:0 30px;">
                    <p>Scan to view on mobile</p>
                    <img src="path/to/qrcode.png" />
                </div>
                <div class="col">
<pre>Mobi.cssMobi.cssMobi.cssMobi.cssMobi.cssMobi.cssMobi.cssMobi.cssMobi.cssMobi</pre>
                </div>
            </div>
        </div>
    </div>
</body>
guyskk commented 7 years ago

selection_001

xcatliu commented 7 years ago

@guyskk I tried to solve it, and then find two solutions.

We can provides two more classes, col-2-3, col-3-4, then use col-1-4 and col-3-4, everything goes well. But if you still use col-1-4 and col, the problem still exists.

image

Or we can set the flex-wrap of row to wrap, then col with pre inside will be wrapped to the second line.

image

I prefer the first choice, since I replied in #18, I don't want to row to be wrap-able.

http://v4-alpha.getbootstrap.com/layout/flexbox-grid/ http://flexboxgrid.com/