如何调整 bootstrap 轮播高度？

Question

这是我的网站：https://pcshiraz.ir
我的轮播图片高度没有响应，我找不到解决办法。

Answer 1

您无法处理 carousel-item active 的问题。你可以试试 col-md-6 或 col-sm-12 而不是轮播项目活动。这样，高度将自动调整。

Answer 2

您需要使用

.carousel {
   min-height: auto;
}

或尝试使用

.carousel {
   min-height: 100%;
}

Answer 3

尝试使用视图高度，

.carousel{
    min-height: 100vh;
    height: 100vh;
}

Viewheight 占屏幕视图的百分比。 50vh 表示它将占用您显示器的 50%。 100vh 将占用 100% 的显示空间。

Answer 4

只需在您的幻灯片 <img /> 标签上添加宽度：100%。如果您使用的是 bootstrap，请使用 w-100 class 或 smth。但请注意，SEO 会因为像那样缩小图像而踢你的屁股，你可能想使用多张图像并根据屏幕尺寸显示它们。

Answer 5

您好，您可以添加此 样式表 我已经在您的网站上尝试使用检查元素有效！

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .carousel-inner {
    height: 400px;
}

.carousel-item, .carousel-item img {
    height: 400px;
  width:100%;
}

} 

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 767px) {
    .carousel-inner {
    height: 160px;
}

.carousel-item, .carousel-item img {
    height: 160px;
  width:100%
}
}

这是结果

如何调整 bootstrap 轮播高度？

How adjust bootstrap carousel height?

laravel

twitter-bootstrap

bootstrap-4

carousel

saas