ui-bootstrap columns break in AngularJS -
i'm new angularjs, , guess default i'm new ui-bootstrap. however, i'm no stranger official vanilla bootstrap, i'm bit confused why columns not aligning. reason, size of columns behave rows unless add "pull-left" or "pull-right" classes, default breaks down. have no idea why it's behaving this, i've seen other bits of sample code not having problems columns in format. i've read docs find associated ui-bootstrap, there's no mention of regarding bootstrap grid.
here's plunker: https://embed.plnkr.co/txdqsqhqlrmhrps0wyl9/ (i'm aware menu doesn't work here, that's fixed on local version of project.)
and... should work, right?
<div class="container-fluid"> <div class="row"> <div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: pink;">first col </div> <div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: cyan;">second col </div> <div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: lightgreen;">third col </div> </div>
or missing something?
first: col-4-sm
incorrect. needs col-sm-4
column width goes @ end.
second: if using angular material, recommend using layout directives controlling content position. see - https://material.angularjs.org/latest/layout/container
hope helps. :)
Comments
Post a Comment