html - 使用 Bootstrap 4 更改尺寸后更改设计

问题描述

这将涉及很多打字。

当尺寸减小时，我需要稍微更改设计的页面。包括但不限于部分菜单交换位置和部分领域的额外设计功能

目前我正试图严格遵守关于响应断点的 Bootstrap 4 文档（https://getbootstrap.com/docs/4.0/layout/overview/）

仅举其中一个菜单的示例

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Navigation Menu</title>
    
    <script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>
    <script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"><\/script>')</script>
    <script src="Libs/Popper/popper.min.js"></script>
    <script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>
    
    <link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">
    
</head>
    
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">

    <a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">
        <!-- Carousel -->
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse main-navbar" id="main-navbar">

        <ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">
            <li class="nav-item">
                <a class="nav-link" href="#">PRODUKTE</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DIENSTLEISTUNGEN</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">UNTERNEHMEN</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">NEWSROOM-STORY</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">SPOTLIGHT:TECHNIK
                    <?php //echo $spotlight; ?>
                </a>
            </li>
        </ul>
        
        <ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">
            <li class="nav-item">
                <a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>
            </li>
            <li class="nav-itemv">
                <a class="nav-link text-danger" href="#">SHOP</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DATENSCHUTZ</a>
            </li>
            <li class="nav-itemv">
                <a class="nav-link" href="#">KONTAKT</a>
            </li>
        </ul>
        
        <!-- Language Menu -->
        <ul class="nav navbar-nav mr-auto language-menu" id="language-menu">
            <li class="nav-item">
                <a class="nav-link" href="#">DE</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">EN</a>
            </li>
        </ul>

    </div>

</nav>
    
</body>
</html>

额外的css如下

.smaller_font{
    font-size: 80%;
}

@include media-breakpoint-down(md){
    .main-navbar{
        border-bottom: solid 1px;
    }
}

目前我正在尝试使用 @include media-breakpoint-down(md){...} 但是我没有从设计中得到任何反应，当我减小尺寸时它绝对没有任何反应。

这个想法是菜单中的字段将有 1px 底部边框。

我知道还有一个选项可以制作不可见的元素，然后让它们可见，如此处所讨论的bootstrap 4 responsive utility visible / hidden xs sm lg not working

或使用“@media”标签以像素为单位设置宽度，但使用“@include media-breakpoint-down()”标签似乎更有意义（只是直觉）。

我需要某种方式让事情在小范围内工作，以便我可以从那里构建:-)

标签： htmlcssresponsive-designbootstrap-4responsive

html - 使用 Bootstrap 4 更改尺寸后更改设计

问题描述

解决方案

推荐阅读