试图让 Bootstrap 3 轮播适合全屏？答案

【问题标题】：trying to get Bootstrap 3 carousel to fit to full screen?试图让 Bootstrap 3 轮播适合全屏？
【发布时间】：2014-01-09 16:53:49
【问题描述】：

当我运行这个时，图像和轮播溢出，你必须在页面上向下滚动才能看到图像和轮播的底部...

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->

<div class="carousel-inner">
  <div class="item active">
<img src= "/assets/run3.jpg" width = "100%" alt="photo">
<div class="carousel-caption">
       <h3>Sign Up Now!</h3>
<p>This is Where amazing happens</p>
    </div>
  </div>


<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

会发生什么：dropbox.com/sh/tdo3928f453123h/jTbquZNM37

【问题讨论】：

你能提供你的站点链接或给我们看一个关于 JS FIDDLE 的例子吗？
没有站点，正在从计算机上运行应用程序。我以前从未使用过 jsfiddle
好的。那么，可以分享一下截图吗？
我没有足够的代表来发布截图
嘿！你可以把你的截图上传到 Dropbox 之类的地方，然后给我一个链接。将其上传到某个照片共享网站，然后将链接粘贴到此处。

标签： ruby-on-rails twitter-bootstrap twitter-bootstrap-3 fullscreen carousel

【解决方案1】：

您可以强制滑块和图像的宽度和高度：

#carousel-example-generic,
#carousel-example-generic .item,
#carousel-example-generic .item img {
  height: 100%;
}
#carousel-example-generic .item img {
  width: 100%;
}

Bootply

注意：这不会保持比例，但它可以满足您的需求。

【讨论】：

我无法让它工作。我正在将此 CSS 代码添加到我的 bootswatch.css.less 文件中，是否需要以特定方式添加它？