ブートストラップ幅の列番号と構造は意味がありますか？

Question

ちょうどブートストラップの学習を始めました。たとえば、このフォームをこのように設計したのですが、それらの列番号がお互いに合っているかどうかを知りたいですか？

<form class="form-horizontal"> 

    <div class="row"> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <div class="checkbox"> 
      <label> 
       <input type="checkbox"> Website Active 
      </label> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <label>Display this message when the website is not active</label> 
      <textarea class="form-control" rows="3" id="comment"></textarea> 
     </div> 
     </div> 
    </div> 
    </div> 

</form> 

Answer 1

See here私はコメントで説明したものの違い：

あなたの場合には、より適切な構造は次のようになります。

  <div class="container"> 
       <div class="row"> 
        <form class="form-horizontal"> 
         <div class="col-sm-6"> 
         <div class="form-group"> 
           <div class="checkbox"> 
            <label> 
             <input type="checkbox"> Website Active 
            </label> 
           </div> 
         </div> 
         </div> 
         <div class="col-sm-6"> 
         <div class="form-group"> 
           <label>Display this message when the website is not active</label> 
           <textarea class="form-control" rows="3" id="comment"></textarea> 
         </div> 
         </div> 
        </form> 
       </div> 
      </div> 

そして、あなたは周りの.containerまたは.container-fluidクラスを追加する必要がありますあなたの.row

.rowは、1つにまとめて.containerクラス。

See your code on a bootply fiddle