我有一个slider
的Bootstrap。在XL
版本中显示良好,但是当您调整窗口大小并在文本的右侧container
上增加其height
时,图像不适合parent container
来适应height
与container
文字具有相同的高度。您可以在页面的中间部分看到一个实时示例here。
因此,在XL版本中:
但是,如果您调整窗口width
的大小,则容器文本的height
会增加,而不是与滑动条图像的with
相同,发生这种情况:
现在输入代码:
<div class="container-fluid mejores-instalaciones">
<div class="row m-0">
<div class="col-lg-9 col-md-12 col-sm-12 col-12 no-padding">
<div id="carouselExampleControls2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-1.jpg" alt="Niñas haciendo yoga" title="Niñas haciendo yoga">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-2.jpg" alt="Jugando al tenis" title="Jugando al tenis">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-3.jpg" alt="El comedor" title="El comedor">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-4.jpg" alt="La entrada" title="La entrada">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-5.jpg" alt="La biblioteca" title="La biblioteca">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-12">
<h1 class="desc text-right">LAS MEJORES INSTALACIONES DE EXTREMADURA</h1>
<p class="home-text-p text-right">La RUCAB es un referente en Extremadura desde hace 32 años, cuanta con el mayor numero de plazas, un total de 205, repartidas en 36 habitaciones dobles, 132 habitaciones individuales y una habitación adaptada. La construcción se extiende por una amplia zona ajardinada, con seis edificios o núcleos residenciales, además de los edificios de las zonas comunes. El total de superficie construida es de 8.492 m².</p>
</div>
</div>
</div>