背景色はどのように調整できますか？ブートストラップ

Question

私は自分自身に問題が発生したときにブートストラップのチュートリアルを行っていました。それは愚かかもしれないが、私はそれを働かせることはできません。私は9列と3列の列クラスの記事とサイドバーを持っています。記事の背景色（青色）はテキストのすぐ下で終了し、サイドバーの高さに合わせる必要があります。チュートリアルでは起こらないが、いつでも彼は理由を説明する。あなたが私を助けることができたら嬉しいです。

<section class="main row"> 
     <article class="color1 col-xs-12 col-sm-8 col-md-9"> 
      <h3>Article</h3> 
      <p> 
       Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon. 
      </p> 
     </article> 
     <aside class="color2 col-xs-12 col-sm-4 col-md-3"> 
      <h3>Sidebar</h3> 
      <p> 
       Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon. 
      </p> 
     </aside> 
    </section> 

すべてのコードはコンテナクラス内にあります。 私の.color1クラスと.color2クラスは、背景色だけを定義します。

私の考えを理解するのに役立つ画像が添付されています。あなたは、スタイルの下に追加することができます Image with indication

Answer 1

：

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 

をし、あなたのsection要素<section class="main row row-eq-height">