Bootstrap Dropmenu 在点击时自动调整大小
Bootstrap Dropmenu automatically resizes on click
我正在构建一个简单的导航栏,它在最右边有一个 drop-down menu
,如下所示:
问题是,当我单击下拉菜单时,导航栏会自动调整大小,如下图所示,这不是我想要的
这是我的 navbar
代码:
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="/dashboard">
<img
src="{{ url_for('static', filename='images/logo.png') }}"
width="30"
height="30"
class="d-inline-block align-top"
alt=""
/>
App Test
</a>
<div>
<ul class="navbar-nav" style="padding: 0px">
<li class="nav-item dropdown" style="border: none">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<img
src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/fox.jpg"
width="40"
height="40"
class="rounded-circle"
/>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
您忘记添加 navbar-expand
例如 navbar-expand-lg
.
正如 document 所说:
Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
并且:
For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.
带有 .dropdown-menu
选择器的 .navbar-expand-xx
包含 position:absolute;
,这使得下拉菜单看起来浮动而不是扩展区域。
添加 navbar-expand-
class 后,品牌元素上的导航栏需要 flex-grow-1
class 才能将菜单按钮推到右侧。这是 Bootstrap 的 flex utilities。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand flex-grow-1" href="/dashboard">
<img src="{{ url_for('static', filename='images/logo.png') }}" width="30" height="30" class="d-inline-block align-top" alt="">
App Test
</a>
<div>
<ul class="navbar-nav" style="padding: 0px;">
<li class="nav-item dropdown" style="border: none;">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/fox.jpg" width="40" height="40" class="rounded-circle">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
现在,您可能会看到下拉菜单本身不在屏幕上。您可以修复此使用 menu align option.
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
我正在构建一个简单的导航栏,它在最右边有一个 drop-down menu
,如下所示:
问题是,当我单击下拉菜单时,导航栏会自动调整大小,如下图所示,这不是我想要的
这是我的 navbar
代码:
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="/dashboard">
<img
src="{{ url_for('static', filename='images/logo.png') }}"
width="30"
height="30"
class="d-inline-block align-top"
alt=""
/>
App Test
</a>
<div>
<ul class="navbar-nav" style="padding: 0px">
<li class="nav-item dropdown" style="border: none">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<img
src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/fox.jpg"
width="40"
height="40"
class="rounded-circle"
/>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
您忘记添加 navbar-expand
例如 navbar-expand-lg
.
正如 document 所说:
Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
并且:
For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.
带有 .dropdown-menu
选择器的 .navbar-expand-xx
包含 position:absolute;
,这使得下拉菜单看起来浮动而不是扩展区域。
添加 navbar-expand-
class 后,品牌元素上的导航栏需要 flex-grow-1
class 才能将菜单按钮推到右侧。这是 Bootstrap 的 flex utilities。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand flex-grow-1" href="/dashboard">
<img src="{{ url_for('static', filename='images/logo.png') }}" width="30" height="30" class="d-inline-block align-top" alt="">
App Test
</a>
<div>
<ul class="navbar-nav" style="padding: 0px;">
<li class="nav-item dropdown" style="border: none;">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/fox.jpg" width="40" height="40" class="rounded-circle">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
现在,您可能会看到下拉菜单本身不在屏幕上。您可以修复此使用 menu align option.
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>