Bootstrap 4强制父容器流体包括扩展的下拉列表

问题描述 投票:0回答:2

是否有一种方法可以使父div“ .primaryNav”(在示例中以红色背景显示)像在移动设备视图上一样,将我的水平下拉菜单包含在MD到XL视图中,所以它也包含在其中。

[当前,我需要向.mainNav类添加边距以增加容器高度,以使背景颜色和阴影与子导航的底部对齐,并且其下方的内容被向下推。问题是,当没有潜水艇时,则表明容器太高且有缝隙。

目标是使.primaryNav div增长并自动包含子导航,并向下压主要内容区域

#topNav {
  letter-spacing: .06rem;
}

#topNav a.nav-link {
  padding: 0.05rem 0.5rem;
  color: white;
  font-weight: 300;
  font-size: 0.75rem;
}

#topNav a.nav-link:hover {
  text-decoration: underline;
}

#topNav a.nav-link.wpLink {
  font-weight: 800;
  font-size: .9rem;
}

.primaryNav {
  background-color: red;
}

#mainNav .mainSearch .form-control {
  border-left: 0;
}

#mainNav .input-group-text {
  background-color: white;
  border-right: 0;
  padding-right: 0;
}

@media (min-width: 576px) {
  #mainNav {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 800;
  }
  #mainNav .nav-link {
    min-height: 65px;
  }
}

@media (min-width: 768px) {
  #mainNav {
    color: #000;
    font-weight: 800;
  }
  #mainNav .nav-link,
  #mainNav .nav-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #mainNav,
  #mainNav .collapse,
  #mainNav .nav-link {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  #mainNav .navbar-nav {
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 100%;
  }
  #mainNav .nav-link span {
    -ms-flex-item-align: center;
        align-self: center;
  }
  #mainNav .nav-link:active,
  #mainNav .nav-link:focus,
  #mainNav .nav-link:hover {
    color: black;
    border-bottom: 3px solid black;
  }
  #mainNav .active .nav-link {
    border-bottom: 3px solid #0075C9;
  }
  #mainNav .dropdown {
    position: static;
  }
  #mainNav .dropdown-menu {
    display: none;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    border-top: 1px solid grey;
    background: white;
  }
  #mainNav .dropdown-menu.in,
  #mainNav .active .dropdown-menu,
  #mainNav .dropdown:hover .dropdown-menu {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  #mainNav .dropdown-item {
    padding: 1rem 2rem;
    width: auto;
  }
  #mainNav .dropdown-item:hover,
  #mainNav .dropdown-item:focus,
  #mainNav .dropdown-item.active,
  #mainNav .dropdown-item:active {
    color: #000;
    text-decoration: none;
    background-color: #F2F2F2;
  }
}

@media (min-width: 1200px) {
  #mainNav {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <title>Bootstrap Starter</title>


    <!-- Stylesheet -->

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- endbuild -->
</head>
<body>
<!-- Top Navigation -->
<div class="container-fluid bg-primary">
    <div class="container px-0">
        <nav id="topNav" class="navbar navbar-expand navbar-dark text-white px-0 justify-content-lg-end">
            <ul class="navbar-nav d-flex ">
                <li class="nav-item d-lg-none">
                    <a class="nav-link wpLink" href="#">Company</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Support</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Product Registration</a>
                </li>
                <li class="nav-item d-none d-sm-block">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<!-- Main Navigation -->
<div class="container-fluid primaryNav m-sm-0 mb-sm-3 p-sm-0 border-bottom border-secondary shadow">
    <div class="container px-0 mainNav">
        <nav id="mainNav" class="navbar navbar-expand-md navbar-light p-0">
            <!-- Logo -->
            <a class="navbar-brand d-none d-lg-block order-md-first" href="#">
                <img class="img-fluid py-2" src="assets/img/waterpik-shower-heads-logo.png">
            </a>
            <!-- Search Bar -->
            <form class="form-inline order-md-last m-0 my-2 my-md-0 flex-grow-1 flex-lg-grow-0">
                <div class="input-group mainSearch w-100">
                    <div class="input-group-prepend">
                        <span class="input-group-text"></span>
                    </div>
                    <input class="form-control form-control-sm" type="text" placeholder="Search" aria-label="Search">
                </div>
            </form>
            <!-- Toggler -->
            <button class="navbar-toggler align-self-center" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Navigation -->
            <div class="collapse navbar-collapse mx-lg-5" id="navbarCollapse">
                <ul class="navbar-nav">
                      <li class="nav-item active">
                        <a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span>Home</span>
                        </a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span>Shop Products</span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item d-md-none" href="#">Shop All</a>
                            <a class="dropdown-item" href="#">Hand Held</a>
                            <a class="dropdown-item" href="#">Fixed Mount</a>
                            <a class="dropdown-item" href="#">Dual Head</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" id="navbarDropdownMenuLink1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span>Shop Products 2</span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
                            <a class="dropdown-item d-md-none" href="#">Shop All</a>
                            <a class="dropdown-item " href="#">Hand Held 2</a>
                            <a class="dropdown-item" href="#">Fixed Mount 2</a>
                            <a class="dropdown-item" href="#">Dual Head 2</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

    </div>
</div>
<!-- Main Content -->
<main role="main" class="container">
    <div class="jumbotron text-center">
        <img src="assets/img/logo.png"/>
        <h1>Bootstrap 4 Starter Template</h1>
        <p class="lead">This example is a quick bootstrap starter template.</p>
        <a class="btn btn-lg btn-test" href="https://getbootstrap.com/docs/4.3/getting-started/introduction/" role="button" target="_blank">View Bootstrap 4.1 Docs <i class="fad fa-acorn"></i></a>
    </div>
</main>
 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


</body>
</html>

是否有一种方法可以使父div“ .primaryNav”(在示例中以红色背景显示)像在移动设备视图中一样,将我的水平下拉菜单包含在MD到XL视图中?目前,我需要...

html css sass bootstrap-4 flexbox
2个回答
0
投票

您是否尝试过


0
投票

如果要像在移动设备中一样在MD到XL断点中折叠水平菜单,则可以使用.navbar-expand-*类。

热门问题
推荐问题
最新问题