ブートストラップ：行内に複数のネストされた行がありますか？

Question

入れ子になった列の中に行を入れ子にすることはできますが、行内に直接行を入れ子にすることは 'ルールに反するのですか？

例：

<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> 

それともこれらは常に列内でなければなりませんか？

Answer 1

行内に行を直接ネストするのは 'ルール違反'ですか？

に対しては、のルールに準拠していますが、ガイドラインのベストプラクティスではありません。 bootstrap guidelines, third point under introductionパー

-

..and列のみが「行の直下の子かもしれ

* _{編集：This is still true with Bootstrap 4.0 Beta上記のドキュメントへのリンクが自動的にバージョンにリダイレクトされます。 3.3ドキュメント。@Aakashありがとうございます。}

これは、ブートストラップがrow-column-rowパターンでネストする、つまりネストして1つの列をネストしてネストするのがよい方法です。

以下のスニペットの違いをご覧ください。マークアップの最初のセットはブートストラップのレイアウトを壊しますが、何も悪いことはありません。

<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>