Question

使用最新版本的Bootstrap，我想用徽标替换品牌区域文本。在我的桌面上，它看起来很完美，在我的iPhone上，徽标出现在小折叠菜单下，而它应该在它旁边（在它的左边）。如果我将徽标缩小，它在iPhone上工作正常，但小徽标对于桌面网站来说太小了。我想通过在徽标中添加img-responsive类，它会相应缩小，但是失败了。如果你想复制它，那么徽标是276像素宽40像素高。

iPhone上的所有东西在水平方向都很正常（在垂直方向观看时严格来说这是一个问题，这自然是大多数人拿着手机的方式）。

以下是相关代码（您会注意到底部附近有一个购买按钮，这会自动隐藏在iPhone上，如果没有其他选项，这就足够了徽标）。请注意，最终的解决方案是根据屏幕尺寸缩小徽标。

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                <a class="navbar-brand" href="index.php"><img class="img-responsive" src="img/logo.png" alt=""></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.php">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Application <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="features.php">Features</a></li>
                            <li><a href="screenshots.php">Screenshots</a></li>
                            <li><a href="demos.php">Demos</a></li>
                            <li class="divider"></li>
                            <li><a href="purchase.php">Purchase</a></li>
                            <li><a href="licensing.php">Licensing Model</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Documentation <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="documentation.php#tab1">Version Info</a></li>
                            <li><a href="documentation.php#tab2">System Requirements</a></li>
                            <li class="divider"></li>
                            <li><a href="documentation.php#tab3">Installation Guide</a></li>
                            <li><a href="documentation.php#tab4">Integration Guide</a></li>
                            <li><a href="documentation.php#tab5">Frontdesk Manual</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/support/knowledgebase.php">Knowledgebase</a></li>
                            <li><a href="/support/index.php?a=add">Submit Ticket</a></li>
                            <li><a href="/support/ticket.php">View Ticket Status</a></li>
                            <li class="divider"></li>
                            <li><a href="services.php#tab1">Installation Service</a></li>
                            <li><a href="services.php#tab2">Development Services</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="faq.php">Presales Questions</a></li>
                            <li><a href="contact.php">Contact Us</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Legal <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="legal.php#tab1">Privacy Policy</a></li>
                            <li><a href="legal.php#tab2">Terms of Use</a></li>
                            <li><a href="legal.php#tab3">Site Security</a></li>
                            <li class="divider"></li>
                            <li><a href="legal.php#tab4">Money Back Guarantee</a></li>
                        </ul>
                    </li>
                </ul>
                <a href="purchase.php"><button type="button" class="btn btn-success" style="margin-top: 8px; margin-left: 30px;">Purchase</button></a>
            </div>
            <!--/.nav-collapse -->

Answer 1

这解决了I-phone问题以及折叠菜单图标下显示的品牌徽标。根据您的设置，您可能需要使用宽度：

@media (max-width: 500px) {
  .navbar-brand{
    width:60%;
  }
}

Answer 2

将图像作为背景放在css中，背景大小为：cover。

Bootstrap 3固定导航 - 隐藏/调整徽标

2 个答案: