css - Bootstrap row with nested columns margin issue -

css - Bootstrap row with nested columns margin issue -

if utilize 4 columns across, there no issue in first example. if insert row of size 8 2 columns within between 2 size columns, columns not wide first illustration though adds 12?

<div class="container-fluid"> <div class="row"> <div class="col-sm-3" style="background-color:lavender;">column a</div> <div class="col-sm-3" style="background-color:palegreen;">column b</div> <div class="col-sm-3" style=" background-color:palegoldenrod;">column c</div> <div class="col-sm-3" style="background-color:lightpink">column d</div> </div> </div> <div class="container-fluid" style="width:100%;background-color:blue;"> <div class="row"> <div class="col-sm-4 col-md4 col-lg-3" style="background-color:lavender;">column a</div> <div class="col-sm-4 col-md-4 col-lg-6 row"> <div class="col-sm-12 col-lg-6 col-md-12" style="background-color:palegreen;">column b</div> <div class="col-sm-12 col-lg-6 col-md-12" style="background-color:palegoldenrod;">column c</div> </div> <div class="col-sm-4 col-lg-3 col-md-4" style="background-color:lightpink">column d</div> </div> </div>

whenever using col-* have wrap them within row div.

... <div class="col-sm-4 col-lg-6"> <div class="row"> <div class="col-lg-6">column b</div> <div class="col-lg-6">column c</div> </div> </div> ...

notice removed col-*-12 can skip them , if there sizes have same col-span should maintain smallest one, rest redundant.

you can verify on official example grids.

css twitter-bootstrap-3