Question

我正在尝试使用BS4创建一个响应式导航栏，但我面临的问题是，当导航栏为全宽时，下拉菜单正常。但是，在折叠模式下，下拉菜单被推到侧面。我希望宽度作为链接并正确放置

我尝试过的事情：

.navbar{
	background-color:rgb(0,114,187);
	font-family:"Roboto Condensed", "Microsoft YaHei", "Microsoft JhengHei",sans-serif;
}

#navbar10 .navbar-nav .nav-link{
	color:white;
	font-family:"Roboto Condensed", "Microsoft YaHei", "Microsoft JhengHei", sans-serif;
	font-size:14px;

}

.nav-link:hover{
	color:white;
	background-color:rgb(0,34,59);
}

.about.dropdown-menu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
}

.dropdown-menu{
	width:250px;
}

a.dropdown-item{
	text-align:center;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar10">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbar10">
            <ul class="navbar-nav nav-fill w-100">
                <li class="nav-item">
                    <a class="nav-link" href="Index.html">Home</a>
                </li>
                <li class="nav-item dropdown" class = "about">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">About Us</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">Introduction</a>
                        <a href="#" class="dropdown-item">Mission</a>
                        <a href="#" class="dropdown-item">Vision</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

结果 Problem

Answer 1

将margin:0 auto用于drop-down menu

.dropdown-menu{
    width:250px;
    margin:0 auto !important;
}

.navbar{
    background-color:rgb(0,114,187);
    font-family:"Roboto Condensed", "Microsoft YaHei", "Microsoft JhengHei",sans-serif;
}

#navbar10 .navbar-nav .nav-link{
    color:white;
    font-family:"Roboto Condensed", "Microsoft YaHei", "Microsoft JhengHei", sans-serif;
    font-size:14px;

}

.nav-link:hover{
    color:white;
    background-color:rgb(0,34,59);
}

.about.dropdown-menu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
}

.dropdown-menu{
    width:250px;
    margin:0 auto !important;
}

a.dropdown-item{
    text-align:center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar10">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse" id="navbar10">
                <ul class="navbar-nav nav-fill w-100">
                    <li class="nav-item">
                        <a class="nav-link" href="Index.html">Home</a>
                    </li>
                     <li class="nav-item dropdown" class = "about">
                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">About Us</a>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Introduction</a>
                            <a href="#" class="dropdown-item">Mission</a>
                            <a href="#" class="dropdown-item">Vision</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

check this fiddle

为什么下拉菜单的宽度与我的折叠导航栏的链接不同

1 个答案: