Изменить дизайн после изменения размера с помощью Bootstrap 4 - PullRequest
Новая
       44

Изменить дизайн после изменения размера с помощью Bootstrap 4

0 голосов
/ 21 декабря 2018

Это будет много печатать.

У меня есть страница, мне нужно немного изменить дизайн, когда размер уменьшен.Включая, но не ограничиваясь, некоторые части мест обмена меню и дополнительные конструктивные особенности в некоторых полях

В настоящее время я пытаюсь строго придерживаться документации 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.

Я знаю, что есть также возможность сделать невидимые элементы и затем сделать их видимыми, как описано здесь загрузочные 4 отзывчивые утилиты видимые / скрытые xs sm lg не работает

илиустановка ширины в пикселях с помощью тега "@media", но с использованием тега "@include media-breakpoint-down ()" в целом имеет больше смысла (просто интуиция).

Мне нужно как-то получитьработать в малом масштабе, так что я могу построить оттуда: -)

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Найдена некоторая полезная информация здесь , поэтому решил пойти с несовершенным, но все же хорошим решением для создания невидимого объекта в вашем коде.

0 голосов
/ 21 декабря 2018

"В данный момент я пытаюсь использовать @include media-breakpoint-down (md) {...} Но я не получаю никакой реакции от дизайна, который абсолютно НИЧЕГО не делает, когда я уменьшаю размер."

Это не CSS ... 

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

Это SASS .SASS «компилируется» в серверную часть CSS с использованием процессора SASS.Браузер не понимает SASS, он понимает только CSS.

...