引导传送带的宽度和高度

Jorman Bustos 发表于 Dev

乔曼·布斯托斯（Jorman Bustos）

我正在尝试制作一个具有全宽度图像（宽度：100％）和固定高度的自举轮播，但是如果我将宽度设置为100％，那么高度也会自动占用100％

我不确定问题是否出在我的文件中

 <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>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
  <div class="active item">
    <%= image_tag "slider/slide-bg-1.jpg", class: "tales" %>
  </div>
  <div class="item">
    <%= image_tag "slider/slide-bg-2.jpg", class: "tales" %>
  </div>
  <div class="item"> 
    <%= image_tag "slider/slide-bg-3.jpg", class: "tales" %>
  </div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

和我的css文件

.tales {
  width: 100%;
  height: 200px;
}

爱德华多·拉·荷兹·米兰达

您是否要使其响应？如果您是，那么我将建议以下内容：

.tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  max-height: 200px !important;
}

但是，最好的响应方式是使用媒体查询，例如：

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。