1

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

在 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 -->
4

2 回答 2

2

这解决了 I-phone 的问题，即品牌徽标出现在折叠的菜单图标下。根据您的设置，您可能需要稍微调整一下宽度：

@media (max-width: 500px) {
  .navbar-brand{
    width:60%;
  }
}
于 2014-03-09T01:58:55.053 回答
0

使用 background-size:cover 将您的图像作为 CSS 中的背景。

于 2013-11-04T22:00:19.267 回答