隐藏在导航栏后面的 Bootstrap 3.2 轮播答案

【问题标题】：Bootstrap 3.2 carousel hiding behind navbar隐藏在导航栏后面的 Bootstrap 3.2 轮播
【发布时间】：2014-11-02 08:28:38
【问题描述】：

我正在使用 Bootstrap 3.2 制作导航栏和轮播，但是当我将浏览器宽度减小到移动设备时，轮播隐藏在导航栏下。

响应this similar question，我尝试了提供的解决方案，但轮播不再响应。

我在关注 Bootstrap 网站上的示例，但 their components page 上没有轮播示例。所以我从他们主页上的模板中看到了轮播的代码。不知道为什么要隐藏它吗？我是否使用了错误的类？

这里是jsfiddle。

我的轮播代码：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <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>
              <div class="carousel-inner">
                <div class="item active">
                  <img src="images/carousel_large_01.jpg" alt="First slide">
                  <div class="container">
                    <div class="carousel-caption">
                      <h1>Example headline.</h1>
                      <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
                      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <img src="images/carousel_large_02.jpg" alt="Second slide">
                  <div class="container">
                    <div class="carousel-caption">
                      <h1>Another example headline.</h1>
                      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <img src="images/carousel_large_03.jpg" alt="Third slide">
                  <div class="container">
                    <div class="carousel-caption">
                      <h1>One more for good measure.</h1>
                      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                    </div>
                  </div>
                </div>
              </div>
              <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
              <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>

【问题讨论】：

getbootstrap.com/components/#navbar-fixed-top ...你需要在body上添加padding
@Danko：我试过了，但还是同样的问题。看来旋转木马caption隐藏在旋转木马div
是的，现在我明白了……但似乎很难解决，因为您的标题位于距底部 20 像素处。信息太多
我认为您可以做的就是减少信息并以自定义方式更改样式，例如jsfiddle.net/yyjeqshd/1 ...也许还可以隐藏项目符号或其他方式
@Danko ：是的，这是一个很好的解决方法，但不是解决方案。我仍在努力寻找解决方案。Bootstrap 网站上的示例模板具有正确工作的轮播。

标签： jquery css twitter-bootstrap-3

【解决方案1】：

如果您删除 navbar-fixed-top 类，那么轮播看起来就像您想要的那样。如果您想使用navbar-fixed-top 类并且还希望轮播将显示在导航栏下方，请添加一些自定义 CSS，例如 .someclass{margin-top:20px;} 或添加一些引导类，例如 jumbotron 等。

添加navbar-fixed-top 会将导航栏固定/粘贴在顶部，这就是轮播隐藏在其后面的原因。

您还可以查看 This 的响应式课程

【讨论】：