Do strings need an immediate parent in Bootstrap?

Bootstrap 3 docs say:

Lines must be placed in .containerfor proper alignment and filling.

Does this mean that one of their ancestors should be a container or that their immediate parent should be a container?

After looking at the examples, I think that the previous interpretation is correct, since the containers have a fixed width for certain display sizes:

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
  ...
}

And as such, they cannot be placed inside other components (e.g. .panel-bodys).

In other words, the following correct markup in Bootstrap 3?

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Title</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-xs-6">
                Col 1
            </div>
            <div class="col-xs-6">
                Col 2
            </div>
        </div>
    </div>
</div>  
+4
source share
2

, .container.

, :

, - .

, .container.

margin-left: -15px; margin-right: -15px. , , . col-md-12, padding-left: 15px; padding-right: 15px. , , .

- .container, padding-left: 15px; padding-right: 15px;. .

, .container, , . , , Bootstrap rows padding: 0 15px, ( , ).

, .

+7

.container . , , , , . .

:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
+1

All Articles