Bootstrap: positioning div block under col-xs-8 + col-xs-4 is not as expected - css

Question

I'm using Bootstrap 3.0 and my question is:
can this block
<div class="under col-xs-12">fdf</div>
be placed in the code the way as it is shown here
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
<div class="under col-xs-12">fdf</div>
</div>
so that the text fdf is under aaa and bbb
I think it anyway should be under, as col-xs-8 + col-xs-4 cover the whole width, however I'm confused as
div.under{
border:1px solid black;
}
wraps not just one block fdf, but the whole content including aaa and bbb.
You may take a look here:
jsFiddle
So, what's the proper way, from Bootstrap prospective, to make that black border wrap only the second line fdf?

Answer 1

The aaa and bbb columns are floated, so you need to add clear:both; to your under class.
jsFiddle example

Answer 2

Bootstrap way of doing this
This is a similar answer as one posted by j08691, But you are using Bootstrap so we will look at the Bootstrap way of doing this
Bootstrap has provided its own built-in class clearfix for this
pupose(to clear the float)
see this: http://jsfiddle.net/DTcHh/4487/
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
<div class='clearfix'></div>
<div class="under col-xs-12 ">fdf</div>
</div>

Answer 3

It seems the "Bootstrap way" is to make a nested row. See how they did it here under "Nested Scaffolding": http://getbootstrap.com/2.3.2/scaffolding.html.
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
<div class = "row">
<div class="under col-xs-12">fdf</div>
</div>
</div>

Answer 4

And what about creating an other row?
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
</div>
<div class="row">
<div class="under col-xs-12">fdf</div>
</div>