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

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -