html - Bootstrap : Stretching navbar-toggle button in media query

Question

我已经开始使用 Bootstrap 制作一个简单的网站。一切正常，但因为我将我的 Logo 放在 navbar-header 中，所以当低于 407px(由于 Logo 大小为 407)时，该按钮确实很时髦。

目前，它是这样的(>407px 宽): http://imgur.com/SIGRNqm,jH9zJji,Kwvbv98#0

在 407 下，它看起来像这样: http://imgur.com/SIGRNqm,jH9zJji,Kwvbv98#1

我希望它看起来像这样:(点击前面的链接，将#1 替换为#2，“我没有足够的声誉...”)

我该怎么做？

谢谢!如果您需要任何进一步的详细信息，请告诉我。- jack

编辑:这是构成完整 header 的代码:

<div class="navbar-header" id="header">
    <a href="//www.itsthejackpot.net" class="navbar-brand" id="logo">
        <img src="/images/itsthejackpot.png" alt="itsthejackpot.net">
    </a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar" id="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>

我看到很多人提示在 button 中使用 span，但它工作正常。

Answer 1

可能不是最好的方法，但你可以暂时使用它:

@media only screen and (max-width : 480px) {
    #logo, #logo img {
        width: 230px;
        margin-top: 3px;
        height: 30px;
    }
}