Question

我有一个简单的页面，我使用Bootstrap来构建它。我无法选择（响应）多个div类中的divs。

我的代码示例：

<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>

我想为well类设置高度。例如，对于col-lg-4，我想使well类的高度为600px。适用于md 500px，sm 400和xs 350px等

Answer 1

假设我理解了您的问题，并且未向您提供CSS。以下是我在col-lg-4 class

中设置well class和IMG样式的示例

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>

Answer 2

据我所知，你想通过不同的断点达到不同的高度。这意味着，您必须使用媒体查询设置div的样式（每个Bootstrap col类都会响应特定的媒体查询。）

您的代码应该与此类似：

.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;}
}

如果简单的.well没有选择你的div，那么你应该在浏览器中使用DevTools并检查div的确切类别。

在多响应类div中选择一个div

2 个答案: