Geek Answers Handbook

Bootstrap: multiple nested lines inside a line?

I know that you can embed rows inside nested columns, but against the rules, embed rows directly in rows?

eg:

<div class="row"> <div class="row"> cols in here </div> <div class="row"> cols in here </div> <div class="row"> cols in here </div> </div>

Or should they always be in columns?

+5
source share
1 answer

Is it against the rules to embed strings directly in strings?

Not against the rules per se, but not the best practices in accordance with the guidelines.

Per boot recommendations, the third point under the sign of implementation is

.. and only columns can be immediate children of rows. "

* Edit: This is still true with the beta version of Bootstrap 4.0 . A link to the documents mentioned above will automatically be redirected to the version 3.3 documentation. Thanks @Aakash for pointing this out.

This is because of the padding that Bootstrap uses to compose it, the good practice is to nest through the row-column-row pattern, that is, nest a single row-column-row in a socket.

See the difference in the snippet below. The first set of markup breaks the Bootstrap layout, although nothing bad happens.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="row"> <div class="col-xs-6">One</div> <div class="col-xs-6">Two</div> </div> </div> </div> <hr> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="row"> <div class="col-xs-6">One</div> <div class="col-xs-6">Two</div> </div> </div> </div> </div> <hr> <div class="container"> <div class="row"> <div class="col-xs-12">One</div> <div class="col-xs-12">Two</div> <div class="col-xs-12">Three</div> </div> </div>
+11
source

More articles:


All Articles