Bootstrap / CSS - why is .clearfix needed here

Question

I had an issue while trying to place some <input/> elements in a fixed-positioned DIV with Bootstrap 3. It seemed that the container DIV grew in width to accommodate the inputs (which were inside col-* containers) for no apparent reason. Here is a demo code:

    <div class="dropdown-menu" style="top: 10px; left: 400px; position: fixed; display: block;">
      <div class="col-xs-12">
        <div class="col-xs-12">
          <div class="radio">
            <label> <input type="radio" name="st" value="0">Bark</label>
          </div>
          <div class="radio">
            <label> <input type="radio" name="st" value="1">Roll over</label>
          </div>
          <div class="radio">
            <label> <input type="radio" name="st" value="2">Find bone and bury it underground</label>
          </div>
        </div>
        <div class="col-xs-12 whyyyyyyyyyyyyyyyyyyyyyy">
          <div class="col-xs-3">
            <input class="form-control" />
          </div>
          <div class="col-xs-3">
            <input class="form-control" />
          </div>
          <div class="col-xs-3">
            <input class="form-control" />
          </div>
          <div class="col-xs-3">
            <input class="form-control" />
          </div>
        </div>
      </div>
    </div>

This is how the above looks with:

And this is without the inputs:

After checking widths and min-widths, I discovered that only using .clearfix between all col-* elements fixed the problem, like so:

    <div class="dropdown-menu" style="top: 10px; left: 400px; position: fixed; display: block;">
      <div class="col-xs-12">
        <div class="col-xs-12">
          <div class="radio">
            <label> <input type="radio" name="st" value="0">Bark</label>
          </div>
          <div class="radio">
            <label> <input type="radio" name="st" value="1">Roll over</label>
          </div>
          <div class="radio">
            <label> <input type="radio" name="st" value="2">Find bone and bury it underground</label>
          </div>
        </div>
        <i class="clearfix" />
        <div class="col-xs-12 whyyyyyyyyyyyyyyyyyyyyyy">
          <div class="col-xs-3">
            <input class="form-control" />
          </div>
          <i class="clearfix" />
          <div class="col-xs-3">
            <input class="form-control" />
          </div>
          <i class="clearfix" />
          <div class="col-xs-3">
            <input class="form-control" />
          </div>
          <i class="clearfix" />
          <div class="col-xs-3">
            <input class="form-control" />
          </div>
        </div>
      </div>
    </div>

This is how the above looks:

One of these .clearfix-es to be missing and I get terrible container sizes.

I have tried turning to theory by reading about .clearfix, e.g. from here: https://stackoverflow.com/a/9543569/964053 but, again, I do not see what .clearfix changes in this case.

I mean, all elements/content in my case are already floating. Why is the container growing like that and how does .clearfix manage to fix it? The referenced answer says floats do not impart shape to its container and What clearfix does is to force content after the floats or the container containing the floats to render below it. If in my case the floating elements themselves do no cause the container to grow, what the hack does this? The spaces between them?

Is there a better fix for this than using clearfix elements all over the place?

UPDATE :

Hm... It seems there is something invalid in the HTML of my solution code in the 2nd code snippet. It's the self closing <i> elements. That was fixing the problem in Bootply but not outside of it. Here is what I was getting in Bootply:

Hmm... So, I guess I still have no solution to this (at least not one that requires hacks). Any ideas on how to solve this the bootstrap way?

Answer 1

The overall width of the input container is col-xs-12. So they will try and use up that 12 column space. So you can use a smaller col-*-# on the the parent:

<div class="col-xs-6">
  <div class="col-xs-3">
    <input class="form-control" />
  </div>
  <div class="col-xs-3">
    <input class="form-control" />
  </div>
  <div class="col-xs-3">
    <input class="form-control" />
  </div>
  <div class="col-xs-3">
    <input class="form-control" />
  </div>
</div>

However, you might have a bigger problem in how your columns are set up. For example, a column col-xs-12 as a direct descendant of another col-xs-12 is redundant. You should also be using .row containers.

See the boostrap documentation on grids.

Also, never wrap your block level elements like <div> with inline elements like <i> unless their display property is set to inline-block or block. Or your page will render with unexpected results.