Добрый вечер всем,
Я разрабатываю веб-сайт для клиента, он дал мне краткое описание того, как он хотел бы, чтобы Nar Bar выглядел. Сначала это выглядело легко, но, как всегда, я потратил несколько часов, пытаясь найти ответ. Я использую Visual Studio 2019 community, веб-страницы разрабатываются с Razor, и я использую Bootstrap 4 в качестве основы CSS. Я проектирую этот мобильный сначала, и у меня есть верное расположение, но мне нужна ваша помощь, если позволите. На самом деле у меня есть два вопроса, но я рад начать другую ветку, если второй вопрос здесь не актуален.
Я использую очень простой c out-of-the-box Bootstrap NavBar, но я возникла проблема с одним из элементов.
У меня есть небольшое количество пользовательских CSS для переопределения некоторых стилей из Bootstrap.
nav {
padding - bottom: 15 px!important;
}
.navbar {
background: rgb(0, 0, 0);
background: -moz - linear - gradient(180 deg, rgba(0, 0, 0, 1) 0 % , rgba(0, 0, 0, 1) 95 % , rgba(255, 255, 255, 0) 100 % );
background: -webkit - linear - gradient(180 deg, rgba(0, 0, 0, 1) 0 % , rgba(0, 0, 0, 1) 95 % , rgba(255, 255, 255, 0) 100 % );
background: linear - gradient(180 deg, rgba(0, 0, 0, 1) 0 % , rgba(0, 0, 0, 1) 95 % , rgba(255, 255, 255, 0) 100 % );
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = "#000000", endColorstr = "#ffffff", GradientType = 1);
}
.navbar - brand img {
max - height: 105 px;
}
, который производит это, Мобильный макет , как этого хочет клиент.
Когда я увеличиваю размер экрана более чем до 456 пикселей, ссылка «Записаться на прием» перемещается вверх и вправо от кнопки гамбургера. Поэтому мой вопрос заключается в том, как лучше всего держать его под Lo go и гамбургером, пока я не доберусь до 576px, где меняется мой макет, что приводит меня к следующему вопросу.
Если Пользователь использует планшет или рабочий стол, тогда мне нужно, чтобы Navbar изменил внешний вид, у меня есть идея, как это сделать, но я хотел бы посмотреть, есть ли более красноречивый способ сделать это. Вот как это должно выглядеть на планшете / рабочем столе Desktop Layout и это код.
<nav class="navbar navbar-expand-sm navbar-dark">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-7">
<a class="navbar-brand" href="/">
<img src="~/Images/Logo.png" />
</a>
</div>
<div class="col-5 d-md-none">
<button class="navbar-toggler float-right bg-white" type="button" data-toggle="collapse" data-target="#collapsedmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-md-10 col-12">
<div id="collapsedmenu" class="row collapse navbar-collapse">
<div class="col-12">
<ul class="navbar-nav top-menu">
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Car Sales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<partial name="_LoginPartial" />
</ul>
</div>
<div class="col-12">
<div class="contact-number">
<a href="tel:00000000000">
<span>Call Us:</span> 00000 000000
</a>
</div>
</div>
<div class="col-12">
<ul class="navbar-nav service-menu">
<li class="nav-item">
<a class="nav-link" href="#">Book an Appointment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MOT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Итак, мой второй вопрос: легко ли сделать Navbar отзывчивым и показать две разные раскладки? Я собирался скрыть код рабочего стола в Mobl ie с .d-sm-none .d-md-block, а затем показать его, если мы используем рабочий стол. Я полностью открыт для предложений и могу надеяться ответить на любые ваши вопросы.
РЕДАКТИРОВАТЬ: полный код Nav с обновлением от Nisharg