ブートストラップのコラム次の行のdoesntの仕事

Question

何かが私のcolumは、私のコラム.Here下に来るdoesntのCoffeeCoffeeCoffeeCoffeeテキストのために、私は、モバイル/レスポンシブウェブデザインテスターでそれを試してうまくいかないことは絵です：

ここ

は、HTMLコードです：

<div class="row "> 
      <div class="form-group"> 
       <div class="searchable-container"> 
         <div class="items col-xs-6 col-sm-6 col-md-3 col-lg-3 text-center"> 
          <div class="info-block block-info clearfix"> 
           <div class="square-box pull-left"> 
            <span class="fa fa-tags"></span> 
           </div> 
           <div data-toggle="buttons" class="btn-group bizmoduleselect"> 
            <label class="btn btn-default"> 
             <div class="bizcontent"> 
              <input type="checkbox" name="var_id[]" autocomplete="off" value=""> 
              <span class="fa fa-check "></span> 
              <h5>CoffeeCoffeeCoffeeCoffee</h5> 
             </div> 
            </label> 
           </div> 
          </div> 
         </div> 
         <div class="items col-xs-6 col-sm-6 col-md-3 col-lg-3 text-center"> 
          <div class="info-block block-info clearfix"> 
           <div class="square-box pull-left"> 
            <span class="fa fa-tags"></span> 
           </div> 
           <div data-toggle="buttons" class="btn-group bizmoduleselect"> 
            <label class="btn btn-default"> 
             <div class="bizcontent"> 
              <input type="checkbox" name="var_id[]" autocomplete="off" value=""> 
              <span class="fa fa-check "></span> 
              <h5>Tea</h5> 
             </div> 
            </label> 
           </div> 
          </div> 
         </div> 
         <div class="items col-xs-6 col-sm-6 col-md-3 col-lg-3 text-center "> 
          <div class="info-block block-info clearfix"> 
           <div class="square-box pull-left"> 
            <span class="fa fa-tags"></span> 
           </div> 
           <div data-toggle="buttons" class="btn-group bizmoduleselect"> 
            <label class="btn btn-default"> 
             <div class="bizcontent"> 
              <input type="checkbox" name="var_id[]" autocomplete="off" value=""> 
              <span class="fa fa-check "></span> 
              <h5>Fruit Juice</h5> 
             </div> 
            </label> 
           </div> 
          </div> 
         </div> 
         <div class="items col-xs-6 col-sm-6 col-md-3 col-lg-3 text-center"> 
          <div class="info-block block-info clearfix"> 
           <div class="square-box pull-left"> 
            <span class="fa fa-tags"></span> 
           </div> 
           <div data-toggle="buttons" class="btn-group bizmoduleselect"> 
            <label class="btn btn-default"> 
             <div class="bizcontent"> 
              <input type="checkbox" name="var_id[]" autocomplete="off" value=""> 
              <span class="fa fa-check "></span> 
              <h5>Fruit Juice</h5> 
             </div> 
            </label> 
           </div> 
          </div> 
         </div> 
       </div> 
      </div> 
     </div> 

私は私のボタンについては、このCSS

JS .I使用ブートストラップ・v3.3.7.cssとブートストラップv3.3.7を持っています

label.btn-default { 
     white-space: normal; 
     word-break: break-all; 
    } 

ありがとうございます。 ！

Answer 1

あなたは "行" 内のすべてのものを持っている可能性のいずれか、またはあなたが（https://v4-alpha.getbootstrap.com/utilities/clearfix/）

Answer 2

ソリューション明確な修正を使用することができます（

$(document).ready(function() { 
    var h = $('.items').height(); 
    $(".items").css("height", h+10); 
}); 

高さ）。は私に最も高い列の高さを与えて、私はそれらのすべてにこの高さを与えます。