Question

我有一个问题。

我在我的网站上做了更改，我想在我的网站上加入一个全角旋转木马。而不是一个超大的。问题是我的导航栏与jumbotron区域，标题和所有内容重叠。

这是我的HTML：

<div class="nav-area">
    <div class="container"> <!-- Start Container -->

            <nav class="navbar navbar-default" role="navigation">

              <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">

                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>

                  <a class="navbar-brand" href="#">
                    <img alt="dentalclean logo" src="images/logo_2x.png">
                  </a>

                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav pull-right">
                    <li class="active"><a href="index.html">Pagina Inicial <span class="sr-only">(current)</span></a></li>
                    <!-- <li><a href="#">Contactos</a></li> -->

                  </ul>

                </div><!-- /.navbar-collapse -->


              </div><!-- /.container-fluid -->
            </nav>

        </div> <!-- End Container -->
</div>

<span itemscope itemtype="http://schema.org/LocalBusiness">
<div class="hero-section"> <!-- Start Hero Section -->

<div id="slider_dentalclean" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#slider_dentalclean" data-slide-to="0" class="active"></li>
        <li data-target="#slider_dentalclean" data-slide-to="1" class=""></li>
        <li data-target="#slider_dentalclean" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img alt="Dentista Leiria" src="images/hero-img.png">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Example headline.</h1>
                    <p>LOOOOOOOOOOOOOOOOOOOL</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img alt="Second slide" src="images/hero-img.png">
            <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 alt="Third slide" src="images/hero-img.png">
            <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>

</div>

我为缺乏组织而道歉。

顺便说一下，我正在使用sass和bootstrap。

以下是问题所在：https://www.dropbox.com/s/bigm6291gmwgcf6/Screenshot%202015-04-06%2018.46.43.png?dl=0

非常感谢，我在这里搜索了所有的答案，但我找不到一个有用的答案。

小提琴：https://jsfiddle.net/yjbjvtx2/

CSS：

    .nav-area{
      position:absolute;
      top: 0;

   }

    #slider_dentalclean{
      margin-top: 0;
      z-index: -1;
    }

我在网站上找到了我想要的确切内容：http://getbootstrap.com/examples/carousel/

但我不明白他们是如何让旋转木马标题不在导航栏后面的。

Answer 1

为什么不在你的.hero-section中添加一个上边距？

.hero-section{
   margin-top:5em;

}

或删除#slider_dentalclean上的负边距？

#slider_dentalclean{
  /*margin-top: -73px;*/
  z-index: -1;
}

我从您提到的示例中提取了 carousel.CSS 。确保你也包括bootstrap.js。我更新了下面包含这两个文件的小提琴，并将其中一张幻灯片放入模板中。

我不是100％确定它按预期工作，因为我看不到Dropbox文件，因此您的图像不会显示。也许添加一个imgr或替代来自谷歌或盖蒂的演示图像。

https://jsfiddle.net/joshvito/o8zqyt06/ 更新

Navbar Overlaps Carousel

1 个答案: