Как я могу исправить отзывчивость элементов navbar с помощью bootstrap или css - PullRequest
Новая
       5

Как я могу исправить отзывчивость элементов navbar с помощью bootstrap или css

2 голосов
/ 22 марта 2020

Мне нужно сделать страницу, очень похожую на ту, которая уже существует, но мне нужно повторить поведение адаптивной страницы, что доставляет мне неприятности с моим navbar, если кто-то может подсказать мне, как сделать навигационную панель, аналогичную той, которую я должен сделать, это очень помогло бы полностью

Вот немного моего html

image

Вот так выглядит мой navbar на отзывчивом

enter image description here

Вот как это должно выглядеть

enter image description here

* Вот ссылка страницы, которую я должен повторить *

Ответы [ 2 ]

0 голосов
/ 23 марта 2020

Наконец это сделано. Я разработал для средних и маленьких экранов. Вы также можете добавить стиль для маленького экрана. 

/* Extra small devices (phones, 600px and down) */
/* @media only screen and (max-width: 600px) {...} */

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
            div.wwe{
                background-color: maroon !important;
            }
            .navbar-collapse{
                position: absolute !important;

                top: 4rem;
                right: 2rem;
                background-color: #2f3542;
                text-align: center;
                width: 15rem;
            }
            
    }

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    div.wwe{
                background-color: aqua !important;
            }
            

            .navbar-collapse{
                position: absolute !important;
                top: 4rem;
                right: 2rem;
                background-color: #2f3542;
                text-align: center;
                width: 15rem;
            }
    }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Template</title>

    <!-- Font Awesome 4.7 -->
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />

    <!-- bootstrap 4.4 -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />


  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark  bg-dark  ">
      <a class="navbar-brand " href="#">My College</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse " id="navbarNavDropdown">
        <ul class="navbar-nav  ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >Programme <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link " href="#">Abstracts</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " href="#">PArtners and Exhibtors</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " href="#">Venues and Travles</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Conference Info</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-info" href="#">Book now for 2020</a>
          </li>

          <!-- <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdownMenuLink"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div> -->
          </li>
        </ul>
      </div>
    </nav>
    <div class="wwe">
        sadjdb
    </div>
    <!-- Bootstrap js ,popper js and jquery  -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>

    <!-- Custome js  -->
    <script src="script.js"></script>
  </body>
</html>
0 голосов
/ 22 марта 2020

Вот как я это решаю, добавив css класс 

@media (max-width:1100px){
            .divider-border {
                display:none !important;
            }
            .navbar-brand{
                display:none !important;
            }
            .margin-top-fb{
                display:none !important;
            }
            .margin-top-tw{
                display:none !important;
            }
            .RCP{
                display:none !important;
            }
            .nav-letter{
                text-align: center;
            }
            .mr-left-logo{
                margin-left: -5px !important;
            }
            .btn-info{
                max-width: 150px !important;
                text-align: center !important;
                vertical-align: middle !important;
                margin-left: auto;
                margin-right: auto;
            }
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...