Question

我已经搜索过，无法获得正确的解决方案

我从以下帖子中得到了这么远： Bootstrap. How to add multiple add affix attribute? 使用多个附加属性

请有人帮我解决两个问题：

问题1：

#affix1.affix {
    position: fixed; 
    background-color: #000;
    width: 100%;
    top: -10px; 
    z-index:1030;
}

#affix2.affix {
    position: fixed; 
    width: 100%;
    background-color: #000;
    top: 105px; 
    z-index:1030;
}

#affix3.affix {
    position: fixed; 
    width: 100%;
    background-color: #000;
    top: 155px; 
    z-index:1030;
}

@media (max-width: 767px) {
    #affix3.affix {
        position: fixed; 
        width: 100%;
        background-color: #000;
        top: 330px; 
        z-index:1030;
    }
}

我需要将标题，导航栏和导航包装器固定到顶部，保持黑色背景。

问题2

http://jsfiddle.net/Spiral57/wnbFf/

#affix4.affix {
    position: fixed; 
    background-color: #fff;
    right: 15px;
    top: -10px; 
    z-index:1030;
}


#affix5.affix {
    position: fixed; 
    width: 100%;
    background-color: #fff;
    top: 105px; 
    z-index:1030;
}

#affix6.affix {
    position: fixed; 
    width: 99%;
    background-color: #fff;
    top: 155px; 
    z-index:1030;
}

@media (max-width: 767px) {
    #affix6.affix {
        position: fixed; 
        width: 92%;
        background-color: #fff;
        top: 330px; 
        z-index:1030;
    }
}

我需要将标题，导航栏和导航包装器固定到顶部，并保持白色背景。有了这个，我需要将徽标留在右侧。

Answer 1

在玩了一个多星期之后，最终我决定将所有想要加入div的内容包装起来，然后加上div。代码少得多，而且就像魅力一样。

CSS：

#affix1.affix {
position: fixed; 
background-color: #000;
width: 100%;
top: -10px; 
left: 0; 
z-index:1030;
}

#affix2.affix {
position: fixed; 
background-color: #fff;
width: 100%;
top: -10px; 
left: 0; 
z-index:1030;
}

HTML：

<div class="black" id="affix1" data-spy="affix" data-offset-top="1">
<div class="page-header">
        <div> <a href="index.html" title="">
            <h1>
                <img id="logotype" src="images/logo.png" alt=""> 
            </h1>
              </a> 
        </div>
    </div>
    <!--End Header-->

    <!--Start Navigation-->
    <nav class="navbar-collapse" role="navigation">
        <ul class="nav navbar-nav navbar-left">
            <li><a id="black" href="#">MENU</a></li>
            <li><a id="black" href="#">MENU</a></li>
            <li class="dropdown">
                <a id="black" href="#" class="dropdown-toggle" data-toggle="drop down">MENU</b></a>
                <ul class="dropdown-menu">
                    <li><a id="black" href="#">Action</a></li>
                    <li><a id="black" href="#">Another action</a></li>
                    <li><a id="black" href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a id="black" href="#">Separated link</a></li>
                    <li><a id="black" href="#">One more separated link</a></li>
                </ul>
            </li>
            <li><a id="black" href="#">MENU</a></li>
            <li><a href="#"><img src="/menu.png"></a></li>
        </ul>
    </nav>
    <!--End Navigation-->

    <!--Navigation Image-->
    <div class="navwrapper"><a>TEXT TEXT</a></div>
    </div>

我希望这可以帮助别人。

顺便说一下，它也适用于浮动右图像，因为包裹图像的div不是右移，所以没有问题。

Bootstrap 3附加标题和菜单

1 个答案: