複数回答のクラスdiv内のdivを選択

Question

私は単純なページを持っており、私はそれを構築するためにブートストラップを使います。私はdivsを選択して複数のdivクラスの中にある（応答する）ことはできません。

私のコード例：私は高さwellクラスのスタイルにしたい

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
    <div class="well"> 
     <img src="https://image.tmdb.org/t/p/w342/r6dxyfjbpOw4CG2feUhlUOLynUs.jpg" class="img-rounded img-responsive center-block img-thumbnail" alt="Michael Fassbender"> 
    </div> 
</div> 

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
    <div class="well"> 
     <img src="https://image.tmdb.org/t/p/w342/r6dxyfjbpOw4CG2feUhlUOLynUs.jpg" class="img-rounded img-responsive center-block img-thumbnail" alt="Michael Fassbender"> 
    </div> 
</div> 

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
    <div class="well"> 
     <img src="https://image.tmdb.org/t/p/w342/r6dxyfjbpOw4CG2feUhlUOLynUs.jpg" class="img-rounded img-responsive center-block img-thumbnail" alt="Michael Fassbender"> 
    </div> 
</div> 

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
    <div class="well"> 
     <img src="https://image.tmdb.org/t/p/w342/r6dxyfjbpOw4CG2feUhlUOLynUs.jpg" class="img-rounded img-responsive center-block img-thumbnail" alt="Michael Fassbender"> 
    </div> 
</div> 

。たとえば、col-lg-4の場合、高さをwellクラスの600pxにしたいと考えています。 md 500pxの場合、sm 400とxs 350pxなど

Answer 1

内col-lg-4 classとIMGのスタイルを設定する方法の例です。つまり、メディアクエリ（各Bootstrap colクラスが特定のメディアクエリに応答する）を使用してdivのスタイルを設定する必要があります。

あなたのコードは次のようになります。簡単な.wellはあなたのdiv権利を選択しない場合は、あなたがあなたのブラウザでデベロッパーツールを使用すると、あなたのdiv要素の正確なクラスを確認する必要があります

.well { height: 350px; } 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { 
.well { height: 400px; } 
} 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { 
.well { height: 500px; } 
} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { 
.well { height: 600px;} 
} 

。

Answer 2

私はあなたの質問を理解し、CSSを提供しないと仮定します。 は、ここで私は、あなたが別のブレークポイントによって異なる高さを実現したいのか、私は理解してからwell class

body{ 
 
    background-color: black; 
 
} 
 
.col-lg-4{ 
 
    width: 200px; 
 
    padding: 10px; 
 
    background-color: maroon; 
 
} 
 
.col-lg-4 .well img{ 
 
    border-radius: 50px; 
 
    width:150px; 
 
    height: 200px; 
 
    margin-left: 23px; 
 
}

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
 
    <div class="well"> 
 
     <img src="https://image.tmdb.org/t/p/w342/r6dxyfjbpOw4CG2feUhlUOLynUs.jpg" class="img-rounded img-responsive center-block img-thumbnail" alt="Michael Fassbender"> 
 
    </div> 
 
</div> 
 

 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
 
    <div class="well"> 
 
     <img src="https://image.tmdb.org/t/p/w342/r6dxyfjbpOw4CG2feUhlUOLynUs.jpg" class="img-rounded img-responsive center-block img-thumbnail" alt="Michael Fassbender"> 
 
    </div> 
 
</div> 
 

 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
 
    <div class="well"> 
 
     <img src="https://image.tmdb.org/t/p/w342/r6dxyfjbpOw4CG2feUhlUOLynUs.jpg" class="img-rounded img-responsive center-block img-thumbnail" alt="Michael Fassbender"> 
 
    </div> 
 
</div> 
 

 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
 
    <div class="well"> 
 
     <img src="https://image.tmdb.org/t/p/w342/r6dxyfjbpOw4CG2feUhlUOLynUs.jpg" class="img-rounded img-responsive center-block img-thumbnail" alt="Michael Fassbender"> 
 
    </div> 
 
</div>