引导轮播宽度和高度 [英] Bootstrap carousel width and height

问题描述

我试图做一个引导旋转木马图像（宽度：100％）的全宽，固定的高度，但如果我将宽度设置为100％，自动的高度也采取100％

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

 < div id = myCarouselclass =carousel slide> 
< ol class =carousel-indicators> 
< li data-target =＃myCarouseldata-slide-to =0class =active>< / li> 
< li data-target =＃myCarouseldata-slide-to =1>< / li> 
< li data-target =＃myCarouseldata-slide-to =2>< / li> 
< / ol> 
<！ - 轮播项目 - > 
< div class =carousel-inner> 
< div class =active item> 
<％= image_tagslider / slide-bg-1.jpg，class：tales％> 
< / div> 
< div class =item> 
<％= image_tagslider / slide-bg-2.jpg，class：tales％> 
< / div> 
< div class =item> 
<％= image_tagslider / slide-bg-3.jpg，class：tales％> 
< / div> 
< / div> 
<！ -  Carousel nav  - > 
< a class =carousel-control lefthref =＃myCarouseldata-slide =prev>& lsaquo;< / a& 
< a class =carousel-control righthref =＃myCarouseldata-slide =next>& rsaquo;< / a& 
  

p>

  .tales {
 width：100％; 
 height：200px; 
} 
  

解决方案

响应？如果你这样，我只会推荐以下：

  .tales {
 width：100％; 
} 
 .carousel-inner {
 width：100％; 
 max-height：200px！important; 
} 
  

然而，最好的方法是通过使用媒体查询类似：

  / *比标准960（设备和浏览器）小* / 
 @media only （最大宽度：959像素）{} 
 
 / *平板电脑肖像大小到标准960（设备和浏览器）* / 
 @media只有屏幕和（最小宽度：768像素） max-width：959px）{} 
 
 / *所有移动设备尺寸（设备和浏览器）* / 
 @media only screen and（max-width：767px）{} 
 
 / *移动横向尺寸到平板电脑肖像（设备和浏览器）* / 
 @media只有屏幕和（最小宽度：480像素）和（最大宽度：767像素）{} 
 
 / *移动肖像尺寸到移动景观尺寸（设备和浏览器）* / 
 @media只有屏幕和（max-width：479px）{} 
  pre> 
Im trying to do a bootstrap carousel with full width for the images (width: 100%) and a fixed height but if I set the width to 100% the height automacally is taking the 100% too

I don't sure if the problem is in my files
 <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>


and my css file
.tales {
  width: 100%;
  height: 200px;
}

解决方案
Are you trying to make it responsive? If you are then I would just recommend the following:
.tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  max-height: 200px !important;
}
However, the best way to handle this responsively would be thru the use of media queries like such: 
/* 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) {}


                        
这篇关于引导轮播宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！