Bootstrap 4 个 li 标签未作为块元素对齐
Bootstrap 4 li tags not aligning as block elements
根据 http://htmlhelp.com/reference/html40/block.html li
是一个块元素,如果我使用 li
标签,菜单在 Bootstrap 的小型设备上切换时保持水平 4. 我的问题是如果 li
标签是块元素,那么对于下面的代码,结果应该是垂直菜单而不是水平菜单?
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Another Menu</a>
</li>
<ul>
目前Bootstrap4处于alpha阶段,这意味着导航栏的SCSS/CSS还没有准备好。
对于较小的屏幕,您应该添加 SCSS 代码来撤消 float:left
。
您可以使用以下 SCSS 代码:
.navbar {
@include media-breakpoint-down(sm) {
.navbar-brand,
.nav-item {
float: none;
}
}
}
前面的SCSS编译成CSS如下:
@media (max-width: 767px) {
.navbar .navbar-brand,
.navbar .nav-item {
float: none;
}
}
根据 http://htmlhelp.com/reference/html40/block.html li
是一个块元素,如果我使用 li
标签,菜单在 Bootstrap 的小型设备上切换时保持水平 4. 我的问题是如果 li
标签是块元素,那么对于下面的代码,结果应该是垂直菜单而不是水平菜单?
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Another Menu</a>
</li>
<ul>
目前Bootstrap4处于alpha阶段,这意味着导航栏的SCSS/CSS还没有准备好。
对于较小的屏幕,您应该添加 SCSS 代码来撤消 float:left
。
您可以使用以下 SCSS 代码:
.navbar {
@include media-breakpoint-down(sm) {
.navbar-brand,
.nav-item {
float: none;
}
}
}
前面的SCSS编译成CSS如下:
@media (max-width: 767px) {
.navbar .navbar-brand,
.navbar .nav-item {
float: none;
}
}