Single full-width column in row with twitter bootstrap grid - html

Question

When using bootstrap's grid, what is the best way to markup a single full-width column in a row?
Do you have to use container and row to hold the column (.container > .row > .col-xs-12 > .actual-content), or can you get rid of the row and column altogether and simply use a wrapping container (.container > .actual-content)?
Let's say
<div class="container">
<div class="row">
<!-- multiple columns -->
</div>
<div class="row">
<div class="col-xs-12">
<p>Actual content goes here. It will span the entire width.</p>
</div>
</div>
<div class="row">
<!-- multiple columns -->
</div>
</div>
vs
<div class="container">
<div class="row">
<!-- multiple columns -->
</div>
<p>Actual content goes here. It will span the full width.</p>
<div class="row">
<!-- multiple columns -->
</div>
</div>
Is one approach considered superior over the other? Since the column spans the entire width for all media sizes, I don't need any responsive features. Rendered output should be the same, but maybe there are subtle differences which I'm not aware of. Using container, row, and column seems like overkill …

Answer 1

The one without the row/grid according to Bootstrap's own documentation. It is the correct way -- don't wrap it with more classes, that's more markup for NO reason.
I posted about this a couple days ago: col-*-12 (col-xs / col-sm / etc) use in Bootstrap 3
Documentation:
No grid classes are necessary for full-width elements.
This is the correct way:
<div class="container">
<div class="row">
<!-- multiple columns -->
</div><!-- closing .row -->
<p>Actual content goes here. It will span the full width.</p>
<div class="row">
<!-- multiple columns -->
</div><!-- closing .row -->
</div><!-- closing .container -->