привет, я хочу попробовать это, например, кнопку галереи и раскрывающийся список на стороне пользователя с левой стороны, и он не отображается в мобильном режиме, когда экран минимизируется, но отображается сверху, как 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"></i> Logout</a></a>
</div>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
вы откроете фрагмент в полноэкранном режиме и убедитесь, что я хочу, чтобы галерея и профиль пользователя не отображались на маленьком экране
Если вы хотите, чтобы определенные части вашего экрана отображались или скрывались в зависимости от разрешения экрана, вам стоит прочитать о медиа-запросы. У Bootstrap они есть, тоже.
Вам не нужно самостоятельно реализовывать такую логику - как и когда свернуть на мобильном устройстве уже встроено в Bootstrap, поэтому просто поиграйте с их различные примеры и обязательно переключитесь на мобильное представление при этом.