#javascript #html #css #bootstrap-4
#javascript #HTML #css #bootstrap-4
Вопрос:
Я хочу, чтобы ссылки размещались вдоль моей навигационной панели с помощью bootstrap. Я попытался использовать утилиты flex на панели навигации, а также попытался применить класс nav, чтобы сделать панель навигации гибкой, а затем использовать класс начальной загрузки .justified-content-around, но по какой-то причине, которую я не вижу, он не хочет работать! Похоже, что на панели навигации есть поля или отступы, соединяющие ссылки вместе, но при проверке с помощью инструментов разработчика я не вижу ничего подобного. Вот мой codepen для изучения: https://codepen.io/Spector1/pen/WNGxzpz В противном случае вот мой html и css ниже.
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<i class="fas fa-mobile-alt"></i>
<span>Qamp;sdot;Camp;sdot;R</span>
</a>
<button class="navbar-toggler" type="button" data-trigger="#MainNav" aria-controls="MainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="MainNav">
<div class="offcanvas-header mt-3">
<a class="navbar-brand" href="/">
<i class="fas fa-mobile-alt"></i>
<span>Qamp;sdot;Camp;sdot;R</span>
</a>
<button class="btn btn-dark btn-close float-right" aria-label="Close navigation">
<span>amp;times; Close</span>
</button>
</div>
<ul class="nav navbar-nav">
<li class="nav-item mx-auto">
<a class="nav-link focus" href="/home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link focus" href="/about">About Us</a>
</li>
<li class="nav-item mx-auto dropdown">
<a class="nav-link focus shadow-none dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Repair Pricing
</a>
<div class="dropdown-menu fade-down" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Smartphones</a>
<a class="dropdown-item" href="#">Smart Watches</a>
<a class="dropdown-item" href="#">Tablets amp;amp; iPads</a>
<a class="dropdown-item" href="#">Drones</a>
<a class="dropdown-item" href="#">Laptops</a>
<a class="dropdown-item" href="#">Desktops</a>
<a class="dropdown-item" href="#">Other/Custom Quote</a>
</div>
</li>
<li class="nav-item mx-auto dropdown">
<a class="nav-link focus shadow-none dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Warranties amp;amp; Policies
</a>
<div class="dropdown-menu fade-down" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Our Repair Warranties</a>
<a class="dropdown-item" href="#">Rewards Program</a>
<a class="dropdown-item" href="#">Our Repair Policies</a>
</div>
</li>
<li class="nav-item mx-auto">
<a class="nav-link focus" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<main>
<div>
<h1>Home/Index Page</h1>
</div>
</main>
<footer>Quality Cell Repair amp;copy; 2020</footer>
</body>
/* Mobile Nav Overlay/OffCanvas Menu Styles */
body.offcanvas-active {
overflow: hidden;
}
.offcanvas-header {
display: none;
}
nav #MainNav button.btn-dark {
background-color: #1d1d2c;
border: none;
}
/* Nav Hamburger Menu Icon (create lines) */
.navbar-toggler {
margin: 1em;
width: 65px;
border: 2px solid #f7f4e9;
transition: border 0.2s ease-in-out;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
border: none;
/* Remove kyboard navigation outline when focused */
outline: none;
}
.navbar-toggler:after,
.navbar-toggler:before,
.navbar-toggler span.icon-bar {
background-color: #f7f4e9;
border-radius: 2px;
content: "";
display: block;
height: 4px;
margin: 5px 0;
transition: all 0.2s ease-in-out;
}
/* Create Hover Animation Effect for Mobile Nav Icon */
.navbar-toggler:hover:before,
.navbar-toggler:focus:before {
transform: scale(1.2) translateY(-7px);
height: 5px;
}
.navbar-toggler:hover span.icon-bar,
.navbar-toggler:focus span.icon-bar {
transform: scale(1.2);
height: 5px;
}
.navbar-toggler:hover:after,
.navbar-toggler:focus:after {
transform: scale(1.2) translateY(7px);
height: 5px;
}
/* Customize navbar theme */
.navbar {
background-color: #e83953;
}
/* change the Brand Icon and Icon text weight */
.navbar .navbar-brand {
font-weight: 500;
color: #1d1d2c;
font-size: 45px;
}
/* Change main nav link colors */
.navbar .navbar-nav .nav-link {
color: #1d1d2c;
transition: 650ms;
}
.navbar .navbar-nav .dropdown-toggle {
color: #1d1d2c;
transition: 650ms;
}
/* Change main nav links color when hovering */
.navbar .navbar-nav .dropdown-toggle:hover {
color: #f7f4e9;
}
.navbar .nav-item:hover .nav-link {
color: #f7f4e9;
}
/* Show link selection for keyboard navigation */
.navbar ul a.focus:focus {
outline: none;
color: #f7f4e9;
}
/* for dropdown only - change the color of dropdown */
.navbar .dropdown-menu {
background-color: #f7f4e9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.navbar .dropdown-item {
color: #e83953;
transition: 650ms;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
background-color: #e83953;
color: #f7f4e9;
font-weight: 700;
}
/* ============= DESKTOP VIEW ============= */
/* Navbar Dropdown animation */
@media all and (min-width: 768px) {
.navbar .nav-item .dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transition: 350ms;
margin-top: 0;
}
.navbar .dropdown-menu.fade-down {
top: 80%;
transform: rotateX(-75deg);
transform-origin: 0% 0%;
}
.navbar .dropdown-menu.fade-up {
top: 180%;
}
.navbar .nav-item:hover .dropdown-menu,
.navbar .nav-item:focus .dropdown-menu {
transition: 300ms;
opacity: 1;
visibility: visible;
top: 100%;
transform: rotateX(0deg);
}
}
/* ============ desktop view .end// ============ */
/* ========== Mobile view ========== */
@media (max-width: 768px) {
.offcanvas-header {
display: block;
}
.navbar-collapse {
position: fixed;
top: 0;
bottom: 0;
left: 100%;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #e83953;
transition: visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.navbar-collapse.show {
visibility: visible;
transform: translateX(-100%);
}
/* Shorten link widths, except dropdowns */
.navbar ul li > a {
width: 15%;
}
}
/* ========== Mobile view ./end ========== */
/* ======================================================================================================== */
Комментарии:
1. Просто добавьте
width: 100%к<ul>этому .2. Вау …. Не могу поверить, что это было так просто! Большое спасибо!!
3. Или вы можете использовать
w-100класс BS4 для 100% ширины. getbootstrap.com/docs/4.5/utilities/sizing