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＆amp; 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)才能将其更改回原始版本，但最多只能更改为原始版本。

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

1 个答案: