Question

我在我的引导页面上有一个标识这个问题，我正在尽我所能在我的导航栏上留下一个标志，停留在导航栏的中心，并在我缩小窗口时保持响应，但是导航栏文本变为当我缩小窗口时，在图像后面，当我点击显示的下拉按钮时，我的徽标只停留在页面的顶部。我需要它与下拉效果一起移动并保持粘在导航栏的底部，这是我的引导代码：

<div class="navbar navbar-default navbar-static-top" id="main">
    <div class="container">
    <img src="images/LogoTango2.png" alt="tango" class="logo">
    <div class="navbar-header">
        <a href="index.html" class="navbar-brand">начало</a>

    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button></div>

        <div class="collapse navbar-collapse navHeaderCollapse" id="right">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="zakuski.html">цех за закуски</a></li>
                <li><a href="opakovka.html">опаковка</a></li>
                <li><a href="gostilnica.html" id="gostilnica">гостилница</a></li>
                <li><a href="contact.html">контакт</a></li>
            </ul>
        </div>
    </div>
</div>

这是我的徽标css：

.logo {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    left: 0;
    right: 0;
    z-index: 2;
}

如果您发现任何问题，请通知我，我会非常感激！

Answer 1

你不应该使用绝对位置。如果这样做，您将必须使用window.resize事件自行控制行为。

如果您想在徽章处放置徽标，请将其放在底部，而不是绝对位置。

<div class="navbar navbar-default navbar-static-top" id="main">
<div class="container">

<div class="navbar-header">
    <a href="index.html" class="navbar-brand">начало</a>

<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button></div>

    <div class="collapse navbar-collapse navHeaderCollapse" id="right">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="zakuski.html">цех за закуски</a></li>
            <li><a href="opakovka.html">опаковка</a></li>
            <li><a href="gostilnica.html" id="gostilnica">гостилница</a></li>
            <li><a href="contact.html">контакт</a></li>
        </ul>
    </div>
    <img src="images/LogoTango2.png" alt="tango" class="logo">
</div>
</div>

.logo {

margin-left: auto;
margin-right: auto;
z-index: 2;
}

Bootstrap导航栏响应式徽标

1 个答案: