css - 使用@media 规则更改 NAVBAR 高度

Question

我有一个带有@media 规则的导航栏

@media screen (max-width: 768px) {
    .navbar {
        min-height: 20px;
        background-color:pink:
    }

    .main_content_wrapper > .navbar, .main_content_wrapper .navbar-nav {
        display: inline-block;
        float: none;
        position: relative;
        background-color: pink:
    }

    .main_content_wrapper > .navbar-nav > li > a, .navbar-brand {
        padding-top: 0px !important;
        padding-bottom: 0 !important;
        margin: 0px;
        height: 102px;
        line-height: 94px;
        font-size: 28px;
        background-color: pink:
    }

    .navbar-toggle {
        margin-right: 18px;
        background-color: pink:
    }
}

.main_content_wrapper > .navbar, .main_content_wrapper .navbar-nav {
    display: inline-block;
    float: none;
    position:relative;
}

.main_content_wrapper > .navbar-nav > li > a, .navbar-brand {
    padding-top: 0px !important;
    padding-bottom: 0 !important;
    margin: 0px;
    height: 102px;
    line-height: 94px;
    font-size: 28px;
}

.navbar-nav > ul > li > a:hover {
   opacity:0.8;
}

.navbar-brand {
    padding:0px;
}

.body-content {
    width:100%;
}
.navbar-collapse {
    height: 172px !important;
    text-align: center;
    background-color: #aaa439;
}

.navbar-collapse > navbar-nav {
    line-height: 14px;
    font-size: 14px;
}

.navbar-brand a:hover {
    color:white;
    opacity:0.8;
}

这是我的布局文件，我在其中引用了所有的 css 等。

<link href="/CSS/theme.pre.css" rel="stylesheet" />
<environment names="Development">
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/CSS/theme.css" />
</environment>
<environment names="Staging,Production">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"
          asp-fallback-href="/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="/CSS/theme.min.css" asp-append-version="true" />
</environment>
<link href="/CSS/theme.styles.css" rel="stylesheet" />
<link href="/CSS/styles.css" rel="stylesheet" />

我想要的是改变小屏幕上导航栏的高度。我已经阅读了有关@media 规则的信息并尝试让它工作，但没有运气:/

任何帮助将不胜感激!谢谢

Answer 1

也许试试这个，但要有所需的高度

@media (max-width: 767px) {
    .navbar {
        height: 50px; /* Set a new height for your navbar */
    }
}