Thomas David Baker Thomas David Baker - 3 months ago 21
CSS Question

Nested rows in Bootstrap 3 fail to respect the grid?

Bootstrap seems to break its own grid once you get into nested rows. This is a good example:



div {
border: 1px solid gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
</div>
<div class="row">
<div class="col-xs-1">col</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-5">nested col-xs-5</div>
<div class="col-xs-7">nested col-xs-7</div>
</div>
</div>
<div class="col-xs-1">col</div>
</div>
</div>





I would expect to be able to make the "nested xs-col-*" columns line up exactly with the 12 cols at the top. It also doesn't work if I make the inner classes col-xs-3/col-xs-7 (adding up to 10 like the containing col). That just leaves a gap at the right.

Is it correct to say that Bootstrap won't actually let you respect the grid once you get into nested rows if you use odd widths? Or am I doing it wrong?

It seems to me that whole point of a grid is that things should be aligned. Do I have to stay away from (nontrivial) nested rows if I want perfect alignment?

Answer

1) Pick the proportions

Nested row also uses a 12-columns grid. So you asked Bootstrap to take 5/12 from 10 parent columns. But this is a fractional number. Because of this column boundaries do not coincide with each other.

Pick the proportions between the columns. For example:

  • 4/12 from 9 parent columns is exactly 3 parent columns
  • 3/12 from 8 parent columns is exactly 2 parent columns

div {
  outline: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-1">col</div>
    <div class="col-xs-1">col</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-xs-3">nested 4</div>
        <div class="col-xs-9">nested 8</div>
      </div>
    </div>
    <div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-1">col</div>
    <div class="col-xs-9">
      <div class="row">
        <div class="col-xs-4">nested 3</div>
        <div class="col-xs-8">nested 9</div>
      </div>
    </div>
    <div class="col-xs-1">col</div>
  </div>
</div>

2) Simplify the layout

You can do the same without nested columns:

div {
  outline: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-3">3 columns</div>
    <div class="col-xs-7">7 columns</div>
    <div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-4">4 columns</div>
    <div class="col-xs-6">6 columns</div>
    <div class="col-xs-1">col</div>
  </div>
</div>

Comments