Question

嘿，我正在寻找导航图像，如下图所示

，但需要有关响应的帮助。当我缩小屏幕时，它不会随之缩小。有人可以看向我指出正确的方向。这包括内联样式，但是将被删除！

我的Nav HTML：

<div class="container">
    <div class="container social-bar-top">
        <img src="assets/images/phone-icon.png" alt="Phone Icon">
        <a class="social-bar-padding text-white">phone here</a>
        <img src="assets/images/mail-icon.png" alt="Email icon">
        <a class="social-bar-padding text-white">email here</a>
        <img src="assets/images/facebook-icon.png" alt="Facebook Icon">
        <img src="assets/images/twitter-icon.png" alt="Facebook Icon">
    </div>
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand nav-logo-margin" href="#">
            <img src="assets/images/dbs-logo.png" width="180" height="auto" alt="">
        </a>
        <button class="navbar-toggler" type="button"  data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link uppercase" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link uppercase" href="#">About Us</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link  uppercase" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Services</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown01">
                      <a class="dropdown-item uppercase" href="#">IT Support</a>
                      <a class="dropdown-item uppercase" href="#">Remote Support</a>
                      <a class="dropdown-item uppercase" href="#">voip</a>
                      <a class="dropdown-item uppercase" href="#">Cloud Services</a>
                      <a class="dropdown-item uppercase" href="#">Boradband</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link uppercase" href="#">Contact Us</a>
                </li>
                <li class="nav-item btn-blue">
                    <a class="nav-link uppercase" href="#" style="padding-left:20px; padding-right:20px;">Remote Support</a>
                </li>
                <li class="nav-item btn-white" style="margin-left:10px;">
                    <a class="nav-link uppercase" href="#" style="color:#0f70b8; padding-left:20px; padding-right:20px;">Client Login</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

我的CSS：

.navbar {
z-index: 1;
position: absolute;
}
.navbar {
background-color: transparent;
}
.top-nav-collapse {
background-color: #4285F4;
}

.dropdown:hover .dropdown-menu {
display: block;
}

.dropdown-menu{
 background-color:rgba(38, 100, 144, .8);
 color:white;
 border-radius:0px;
 }

.dropdown-item{
color:white;
}

.social-bar-padding{
 padding-left:10px; 
 padding-right:20px;
}

.social-bar-top{
top:8px;
position: absolute;
z-index:5;
left:64%;
}

.nav-logo-margin{
margin-top: 10px;
}

@media only screen and (max-width: 768px) {
.navbar {
  background-color: white;
}

.social-bar-top{
display:none;
}
}


@media (min-width: 992px){
.navbar-expand-lg .navbar-collapse{
top:15px;
position: relative;
left:40%;
}
}

如果有人能看到任何缺陷，那么可以指出，因为我对引导系统仍然很陌生。

Answer 1

您错过了data-toggle="collapse"中的一个属性button.navbar-toggler。请检查here中的jsfiddle演示。希望对您有所帮助。

具有顶部栏的Bootstrap响应式Nav

1 个答案: