-1

我已搜索但无法获得正确的解决方案

我与以下帖子相差甚远： Bootstrap。如何添加多个添加词缀属性？ 使用多个词缀属性

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

问题1：

http://jsfiddle.net/Spiral57/b9xTs/

#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;
    }
}

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

4

1 回答 1

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 不是右浮动的，所以不会引起任何问题。

于 2014-04-23T04:38:58.923 回答