html - 仅在移动设备上调整 Twitter Bootstrap 导航栏的高度

Question

我正在努力调整 Shopify 平台上移动设备的导航栏高度。如果它有所作为，我正在使用 Bootstrap v2.1.0。这是导航栏的 HTML:

<div class="navbar{% if settings.inverse_color %} navbar-inverse{% endif %} navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <!-- COLLAPSE BUTTON -->
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
                <div class="nav-collapse collapse">
                <!-- LOGO IN NAV BAR -->
            {% if settings.logo_position == 'header' %}
            {% if settings.use_logo_image %}
                <a class="logo logo-header-image fl hidden-tablet hidden-phone" href="/" title="{{ shop.name }}">
                    <img src="{{ 'header_logo.png' | asset_url }}" alt="{{ shop.name }} Logo">
                </a>
            {% else %}
                <a href="/" class="logo logo-header fl hidden-tablet hidden-phone" title="{{ shop.name }}">{{ shop.name }}</a>
            {% endif %}
            {% endif %}
            <!-- MAIN NAVIGATION -->
            <ul class="nav">
            {% for link in linklists.main-menu.links %}
            {% capture child_list_handle %}{{ link.title | handle }}{% endcapture %}
            {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
            <li class="dropdown{% if link.active %} active{% endif %}" id="menu{{ forloop.index }}" >
            <a class="dropdown-toggle" data-toggle="dropdown" href="#menu{{ forloop.index }}" title="View {{ link.title }}">
            {{ link.title }}
            <b class="caret"></b>
            </a>

我已经尝试过这里的解决方案 Decreasing height of bootstrap 3.0 navbar & Custom height Bootstrap's navbar但没有成功。

这是我在移动设备上尝试添加到我的 CSS 中的内容:

.navbar-nav > li > a { padding-top: 5px !important; padding-bottom: 5px !important; }
.navbar .brand { padding-top: 5px !important; padding-bottom: 5px !important; }
.navbar-inverse, .navbar-fixed-top, .navbar, .navbar-inner { min-height: 35px !important; }

提前致谢!

Answer 1

请记住 bootstrap 是移动的 - 首先你必须引用它以上的任何内容。所以只需添加 .navbar {height:/* your height!important; */ 应该可以解决问题。您可能需要添加 @media (min-width :768px) 以将其改回原始状态，但这最多。