Question

我有一个408px x 130的导航栏品牌形象。导航在浏览器中看起来正确，但我不能让它在移动设备上响应。菜单按钮也不会出现。这是我的导航栏

<nav class="navbar default-nav">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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="#{site_title}" src="/images/logo_white.png" /></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav nav-pills navbar-right">
                    <li><a href="/faq">1</a></li>
                    <li><a href="/about">2</a></li>
                    <li><a href="/contacts">3</a>
                    </li>
                    <li></li>


                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="loginButton">Accedi</a>
                        <ul id="login-dp" class="dropdown-menu">
                            <li>
                                <div class="row">
                                    <div class="col-md-12">

                                        <form action="/" method="post" class="form">

                                            <div class="form-group">
                                                <label class="sr-only" for="form-username">Username</label>
                                                <input type="text" id="username" name="email" placeholder="Email..." class="form-username form-control" />
                                            </div>

                                            <div class="form-group">
                                                <label class="sr-only" for="form-password">Password</label>
                                                <input type="password" name="password" placeholder="Password..." class="form-password form-control" id="password" />
                                                <div class="help-block text-right">
                                                    <a href="/resetPassword"> <span class="login-link">Password dimenticata?</span>
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <button type="submit" class="btn btn-primary btn-block">Login</button>

                                            </div>
                                            <div class="checkbox">
                                                <label> <input type="checkbox" id="rememberme" name="remember-me" /> <span>Ricordami</span>
                                                </label>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="bottom text-center">
                                        <span>Non sei iscritto?</span> <a class="login-link" href="/register"><strong>Registrati</strong></a>
                                    </div>
                                </div>
                            </li>
                        </ul></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>

    </nav>

这个样式是纯粹的bootstrap css

navbar {
    min-height: 130px;
    line-height: 130px;
    z-index: 1;
    height: 130px;
}

我需要使导航符合品牌形象的高度。

问题在于，当我使用手机时，品牌形象没有响应，因此菜单按钮不会出现，徽标会全部显示...

JSFiddle

Answer 1

从技术上讲，导航按钮仍然存在，但因为nav元素没有.navbar-default类，所以它不会继承Bootstrap的样式。您可以通过添加以下内容来解决此问题：

<强> CSS

.navbar-toggle {
    border-color: #ddd;
    top: 37px;
}

.navbar-toggle .icon-bar {
    background-color: #888;
}

您还需要添加jQuery和Bootstrap js以启用菜单的导航切换

<强> HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

要修复图像，您需要执行以下操作（样式可能需要根据您的需要进行调整）

您可以将.navbar-brand的高度设置为auto，并从.navbar中删除高度。此外，将其box-sizing更改为content将允许图像位于元素的填充内。然后，您需要将.img-responsive类添加到徽标图像元素。

<强> CSS

.navbar-brand {
    box-sizing: content-box;
    height: auto;
}

@media (max-width: 767px) {
    .navbar-brand {
        max-width: 15em;
    }
}

/* Optional to replace line-height centering */ 
@media (min-width: 768px) {
    .nav {
        position: relative;
        top: 60px;  /* ( .navbar height / 2 ) - ( #navbar height / 2 ) */
    }
}

<强> HTML

<!-- Add img-responsive class to your logo -->
<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#{site_title}" src="http://2.228.86.3:8080/images/quipark_logo_white.png" class="img-responsive" />
    </a>
</div>

以下是Codepen示例：https://codepen.io/raptorkraine/pen/YrKMgg

bootstrap 3 - navbar品牌响应不起作用

1 个答案: