ブートストラップ - 列の高さを設定する

Question

私は、小さなサイズのカルーセルを持つブートストラップ（バージョン3.3）ウェブサイトを作成しています。その右側にすぐに3つのボックスを作成したいと思います。 （私が何をやろうとしているのかというイメージを参照してください）。

私はそれをすべての応答たい明らかようにボックスはオフセット2 + 1の幅であろうが、私は、オフセットを（媒体&大画面の幅8）カラム+ 1内のカルーセルを配置しました。 次に、2列に別の行（および列）も作成しました。これにより、すべてのボックスがxs画面サイズで同時にカルーセルの下に移動するようになりました。

キャロルの列と同じ高さの列を作るのにrow-eq-heightを使用しましたが、キャロルの高さの2％のボックスを作る方法についてはわかりません& 1箱はカルーセル高さの34％です。 （間違いなく、それらの間にざらつきがないように、ボックスを互いに下に表示したい）。

私のコードはこれまでのところBootplyでした。 https://www.bootply.com/RQfetegi0e

それ以外はHTMLコードです。

<div class="container" style="padding-top:100px;"> 
    <div class="row no-gutter"> 
    <div class="col-md-offset-1 col-md-8 col-sm-8 col-xs-12 row-eq-height"> 
     <div id="myCarousel" class="carousel slide"> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
      <li data-target="#myCarousel" data-slide-to="3"></li> 
      <li data-target="#myCarousel" data-slide-to="4"></li> 
     </ol> 
     <!-- Carousel items --> 
     <div class="carousel-inner img-responsive center-block"> 
      <div class="active item"> 
      <img src="images/carousel/coming-events.jpg" alt=""> 
      </div> 
      <div class="item img-responsive center-block"> 
      <img src="images/carousel/play-group.jpg" alt=""> 
      </div> 
      <div class="item img-responsive center-block"> 
      <img src="images/carousel/learn-skills.jpg" alt=""> 
      </div> 
      <div class="item img-responsive center-block"> 
      <img src="images/carousel/kids-xmas.jpg" alt=""> 
      </div> 
      <div class="item img-responsive center-block"> 
      <img src="images/carousel/backyard-sports.jpg" alt=""> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-2 col-sm-3 col-xs-12 no-padding"> 
     <div class="row"> 
     <div class="col-xs-12" style="margin-bottom:-20px; margin-top:-20px; height:33%;"> 
      <h3 style="text-align:center; color: white; background-color:red; height:33%;">Text Here</h3> 
     </div> 
     <div class="col-xs-12" style="margin-top:-25px; margin-bottom-25px; height:34%;"> 
      <h3 style="text-align:center; color: white; background-color:green; height:34%;">Text Here</h3> 

     </div> 
     <div class="col-xs-12" style="margin-top:-25px; margin-bottom:-25px; height:33%;"> 
      <h3 style="text-align:center; color: white; background-color:blue; height:33%;">Text Here</h3> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSSコード：

.no-gutter > [class*='col-'] { 
    padding-right:0; 
    padding-left:0; 
} 

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

Answer 1

最速のソリューション - あなたのカルーセルが固定されているかどう高さは、第二も（右）行... とは、バックグラウンドを設定するには、同じ高さを設定することです、DIV h3はない、とパディングを除去するためのカラー属性..

<div class="row" style="height:261px"> 
     <div class="col-xs-12" style="height:33%;background-color:red;"> 
      <h3 style="text-align:center; color: white; height:33%;">Text Here</h3> 
     </div> 
     <div class="col-xs-12" style="height:34%;background-color:green;"> 
      <h3 style="text-align:center; color: white; height:34%;">Text Here</h3> 

     </div> 
     <div class="col-xs-12" style="height:33%;background-color:blue;"> 
      <h3 style="text-align:center; color: white; height:33%;">Text Here</h3> 
     </div> 
     </div> 

Answer 2

高さを処理する方法はinheritであり、いくつかのパディングを追加します。

h3 { 
 
    height: inherit; 
 
    padding: 3% 0; 
 
}

<div class="col-xs-12"> 
 
      <h3 style="text-align:center; color: white; background-color:red;">Text Here</h3> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
      <h3 style="text-align:center; color: white; background-color:green;">Text Here</h3> 
 

 
     </div> 
 
     <div class="col-xs-12"> 
 
      <h3 style="text-align:center; color: white; background-color:blue;">Text Here</h3> 
 
     </div>

Answer 3

それはjQueryのを使用して簡単にすることができます。スライダーのすべての画像がロードされると、サイドセクションの高さが直ちに変更されます。あなたがイメージがロードされるまで、あなたが画面上にスピナー（ローダー）を使用することができる高さですぐに有効にしたくない場合は

$(document).ready(function() { 
 
\t $('img').load(function() { 
 
\t var equalHeight = $('.slider').height(); 
 
\t var thirdHeight = equalHeight/3; 
 
\t $('.three-equals').each(function() { 
 
\t \t $(this).height(thirdHeight); 
 
\t }); 
 
}); 
 
});

.three-equals h3 {margin: 0px; padding: 0px;} 
 
.three-equals {background-color: yellow;} 
 
.three-equals:nth-child(2) {background-color: red;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div class="col-xs-8 slider"> 
 
    <div class="row"> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
     <img src="https://i1.wp.com/youmeandtrends.com/wp-content/uploads/2015/11/abstract-beautiful-flower-images.jpg" alt="Image 1"> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://www.lanlinglaurel.com/data/out/76/4584119-high-resolution-images.jpeg" alt="Image 2"> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://newflowerwallpaper.in/download/friendship-flowers-images-and-wallpapers/friendship-flowers-images-and-wallpapers-1.jpg" alt="Image 3"> 
 
     </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-xs-4"> 
 
    <div class="row"> 
 
    <div class="three-equals"> 
 
    <h3>Heading 1</h3> 
 
    </div> 
 
    <div class="three-equals"> 
 
     <h3>Heading 2</h3> 
 
    </div> 
 
    <div class="three-equals"> 
 
     <h3>Heading 3</h3> 
 
    </div> 
 
    </div> 
 
</div>

。