コロンの間のブートストラップの空白スペース

Question

最初は、私の英語を残念に思っています。 私は別のブロックでhtmlページを作成しようとしています。 しかし、いくつかのブロックが背の高いとき、もう1つは高さに空白を残します。

すでにインターネット上で検索していますが、成功していません。

This is my current situation

And this is a example of what I mean

私は誰かが私を助けることができると思います。ここ は、あなたが何ができるか、私の現在のコード

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-9"> 
 
      <div class="darkContainer"> 
 
      <h4>Information</h4> 
 
      <small></small> 
 
      <p> 
 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
      </p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
      <div class="lightContainer"> 
 
      <h4>Information</h4> 
 
      <small></small> 
 
      <p> 
 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
      </p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-5"> 
 
      <div class="darkContainer"> 
 
      <h4>Information</h4> 
 
      <small></small> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
      </p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <div class="darkContainer"> 
 
      <h4>Information</h4> 
 
      <small></small> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
      </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

問題は、あなたが適切にブートストラップの列を分割していないです。それをcol-9とcol-3として分割し、すべてのコンテンツを列の中に配置する必要があります。コードの下 ここで

<div class="container"> 
<div class="row"> 
    <div class="col-md-12"> 

    <div class="col-md-9"> 

     <div class="darkContainer col-md-12"> 
     <h4>Information</h4> 
     <small></small> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 

     <div class="col-md-7"> 
     <div class="darkContainer"> 
     <h4>Information</h4> 
     <small></small> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
    </div> 
    <div class="col-md-5"> 
     <div class="darkContainer"> 
     <h4>Information</h4> 
     <small></small> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
    </div> 

    </div> <!-- col-9 --> 

    <div class="col-md-3"> 
     <div class="lightContainer col-md-12"> 
     <h4>Information</h4> 
     <small></small> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
    </div> 
    </div> <!-- col-12--> 
</div> 

のために働くかもしれデモ DEMO

幸運です！

Answer 2

はCSSでtopとleftまたはrightとbottomを使用です。これにより、ページ上の任意の場所に要素を配置することができます。

Answer 3

残念ながら、この問題は解決できません（標準のブートストラップCSSを使用している場合のみ）。

おそらく、ブートストラップ4がこの問題を解決します。

とにかく、div内のすべてのdivをdiv.rowに設定し、より大きなchild divの高さを他のすべての子に設定すると、JavaScriptで解決できます。

たぶん例に従って実行されます：

var divs = $('div.row > div'); 
var h = 0; 
$.each(divs, function(i, item) { 
    if ($(item).height() > h) { 
     h = $(item).height(); 
    } 
} 
$('div.row > div').height(h);