Как я могу вытащить панель навигации с левой стороны и зафиксировать ее с помощью начальной загрузки

привет, я хочу попробовать это, например, кнопку галереи и раскрывающийся список на стороне пользователя с левой стороны, и он не отображается в мобильном режиме, когда экран минимизируется, но отображается сверху, как ackta ltd, полный код находится во фрагменте, но я пробую много раз сделать, но это не может быть решено для меня, пожалуйста, помогите мне в этом запросе, если вы, люди, хотите рис, я загружу рис для вас, но я думаю, что кода фрагмента достаточно для вас, люди

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap All in One Navbar</title>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Merienda+One">
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href = "assets/css/headerstyle.css" rel = "stylesheet">
<script>
function myFunction() {
  var x = document.getElementById("navbarCollapse");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "display";
  }
}
</script>
</head> 
<body>
  <nav class = "navbar navbar-expand-xl navbar-light bg-light">
    <a href = "#" class = "navbar-brand"><i class = "fa fa-cube"></i>Ackta LTD UK</b></a>
    <button  type = "button" class = "navbar-toggler" data-toggle = "collapse" data-target = "#navbarCollapse" id = "navbarCollapse"  onclick = "myFunction()">
      <span class = "navbar-toggler-icon"></span>
    </button>
    <!-- Collection of nav links, forms, and other content for toggling -->
    <div id = "navbarCollapse" class = "collapse navbar-collapse justify-content-start">
      <div class = "navbar-nav">
        <a class = "nav-link " href = "index.php"><i class = "fa fa-home"></i> Home <span class = "sr-only">(current)</span></a>
        <a class = "nav-link" href = "index.php"><i class = "fa fa-upload"></i> Upload</a>
        <div class = "nav-item dropdown">
          <a href = "#" class = "nav-link dropdown-toggle" data-toggle = "dropdown"><i class = "fa fa-user-circle"></i> About</a>
          <div class = "dropdown-menu">
            <a class = "dropdown-item" href = "privacypolicy.php">Privacy Policy</a>
            <a class = "dropdown-item" href = "termofuse.php">Terms & Use</a>
            <a class = "dropdown-item" href = "team.php">Teams</a>
            <a class = "dropdown-item" href = "contact.php">Contact Us</a>
          </div>
        </div>
      </div>
      <div class = "d-none d-lg-block ">
        <div class = "navbar-nav ml-auto ">
          <div class = " container pr-5  ">
            <button type = "button" class = "btn btn-outline-primary btn-sm btn-block "><i class = "fa fa-file-image-o" aria-hidden = "true"></i> Gallery</button>
          </div>
          <div class = "nav-item dropdown pr-5">
            <a href = "#" data-toggle = "dropdown" class = "nav-link dropdown-toggle user-action"><img src = "assets/i/face.png" class = "avatar" alt = "Avatar"> Paula Wilson <b class = "caret"></b></a>
            <div class = "dropdown-menu">
              <a href = "#" class = "dropdown-item"><i class = "fa fa-user-o"></i> Profile</a></a>
              <a href = "#" class = "dropdown-item"><i class = "fa fa-calendar-o"></i> Calendar</a></a>
              <a href = "#" class = "dropdown-item"><i class = "fa fa-sliders"></i> Settings</a></a>
              <div class = "dropdown-divider"></div>
              <a href = "#" class = "dropdown-item"><i class = "material-icons">&#xE8AC;</i> Logout</a></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</body>
</html>                            

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

nosurs 02.04.2021 15:39

вы откроете фрагмент в полноэкранном режиме и убедитесь, что я хочу, чтобы галерея и профиль пользователя не отображались на маленьком экране

Shujaat khan 02.04.2021 15:49

Если вы хотите, чтобы определенные части вашего экрана отображались или скрывались в зависимости от разрешения экрана, вам стоит прочитать о медиа-запросы. У Bootstrap они есть, тоже.

nosurs 02.04.2021 16:01
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
22
0

Другие вопросы по теме