Question

在这个网站中，我有这个导航栏： picture of the site before

然后，我决定在导航栏中使用词缀引导程序，因此用户可以在向下滚动页面时访问它的功能。但后来发生了这种情况：picture with the affix pluggin

保持简单，当我将data-spy="affix"添加到标记<nav id="main-navbar" class="navbar navbar-default">时，导航栏被旋转木马吞下。重要的是要注意到，一旦处于这个位置，它在滚动页面时固定在窗口中，但不是它应该的方式。因为我不能发布任何更多的链接，也不能嵌入图像，因为我是一个菜鸟，我只会说它相对于浏览器窗口保持相同的位置，并且轮播控件停止工作。

这是正文中的html代码：

<body bgcolor="#f9ffe5">
<div id="main-div" class="container"> 
    <div class="title"> <!--------------------title-------------------->
        <div class="logo"><img src="img/logo-big.png" class="img img-responsive logo" /></div>
        <br>
        <button class="btn btn-success btn-lg btn-Fale-Conosco">Fale Conosco!</button>
    </div>

    <nav id="main-navbar" class="navbar navbar-default" data-spy="affix"><!-------navbar------->
        <div class="navbar-header">
            <a class="navbar-brand logo" href="#">
                <div class="input-group stylish-input-group">
                        <input type="text" class="form-control" placeholder="Search"> 
                        <span class="input-group-addon">
                            <button type="submit">
                                <span class="glyphicon glyphicon-search"></span> 
                            </button>
                        </span>
                </div>
            </a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#titleNavbar"> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
            </button>
        </div>
        <div class="collapse navbar-collapse" id="titleNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Empresa</a></li>
                <li><a href="#">Produtos <span class="glyphicon glyphicon-cutlery"></span></a></li>
                <li><a href="#">Trabalhe Conosco</a></li>
            </ul>
        </div>
    </nav>

    <div id="home-page-carousel" class="carousel slide" data-ride="carousel"><!-------carousel------>
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#homePageCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#homePageCarousel" data-slide-to="1"></li>
            <li data-target="#homePageCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active"> 
                <img class="img-responsive center-block" src="img/carousel/0.jpg" alt="Produtos reforçados em cores variadas e design moderno!"> 
            </div>
            <div class="item"> 
                <img class="img-responsive center-block" src="img/carousel/1.jpg" alt="Fabricamos produtos descartaveis! Atendemos e entregamos em todo o Brasil!"> 
            </div>
            <div class="item"> 
                <img class="img-responsive center-block" src="img/carousel/2.jpg" alt="Consulte disponibilidade de produtos para pronta entrega! Pagamento facilitado!"> 
            </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#homePageCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Anterior</span> </a>
        <a class="right carousel-control" href="#homePageCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Próximo</span> </a>
    </div>

    <div class="row centered-row catalog"> <!------catalog(prototype)------->
        <div class="col-md-3 col-sm-4 col-xs-6 catalog-item">
            <img src="img/products/taca_45_vrm.jpg" class="img-circle img-responsive img-catalog" alt="Taça 45ml">
            <h3>Taça 45 ml</h3>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 catalog-item">
            <img src="img/products/copo_45_azc.jpg" class="img-circle img-responsive img-catalog" alt="Copo 45ml">
            <h3>Copo 45 ml</h3>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 catalog-item">
            <img src="img/products/garfo_ref_prt.jpg" class="img-circle img-responsive img-catalog" alt="Garfo Refeição Reforçado">
            <h3>Garfo Refeição Reforçado</h3>
        </div>
    </div>
</div>

然后，自定义引导程序导航栏的ccs：

.navbar-default {
  background-color: #1ba30b;
  border-color: #006310;
  z-index: 1;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: green;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #1ba30b;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #ffffff;
  background-color: #006310;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #006310;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #ffffff;
  background-color: #006310;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #006310;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #006310;
}
.navbar-default .navbar-toggle {
  border-color: #006310;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #006310;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #006310;
  }
}

自定义引导轮播的css

.carousel .carousel-indicators li{
    background-color: transparent;
    border-color: forestgreen;
}

.carousel .carousel-indicators li.active{
    background-color: forestgreen;
    border-color: transparent;
}

.centered-row{
    text-align: center;
}

.carousel{
    -moz-border-radius: 10px; /* FF1+ */
    -webkit-border-radius: 10px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    overflow:hidden;
    z-index: 1000;
}

.carousel-control .glyphicon-triangle-right,
.carousel-control .glyphicon-triangle-left {
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}

.glyphicon-chevron-left,
.glyphicon-chevron-right {
    color:forestgreen;
    vertical-align: middle;
}

最后是自定义搜索输入的css：

.stylish-input-group .input-group-addon{
    background: white !important; 
}
.stylish-input-group .form-control{
    border-right:0; 
    box-shadow:0 0 0; 
    border-color:#ccc;
}
.stylish-input-group button{
    border:0;
    background:transparent;
}

div.stylish-input-group{
    max-width: 187px;
}

我已经尝试了很多不同的东西。我也没有找到类似的案例。但我希望这很简单。以下是我已经尝试过但没有用的一些事情：

将<nav>和<div class="carousel slide">换成另外一层分开的<div>标记
更改css中的position属性
在两者中放入ID，以解决引导程序中的某种JavaScript问题。

如果您的答案与上述其中一项有关，请不要担心，可能会略有不同。此外，没有使用片段的东西，因为bootstrap不起作用。

Answer 1

您的navbar z-index值应高于轮播的值。

您还需要为词缀类提供属性：

您必须添加CSS属性来处理实际位置，但位置除外：在.affix类上修复。

在CSS中添加它可以解决您的问题：

navbar.affix{
    /* values related to your affixed navbar position (for example, top: 0;) */
    z-index: 10000;
}

度过愉快的一天。

为什么我的引导程序会在我的轮播中添加导航栏？

1 个答案: