Twitter bootstrap 如何放置<;李>;汉堡图标下方的元素?
在移动模式下,如何在Bootstrap 4中的汉堡图标和徽标下方放置列表元素“Home”?我尝试将徽标显示为style=“display:block”,但不起作用Twitter bootstrap 如何放置<;李>;汉堡图标下方的元素?,twitter-bootstrap,css,bootstrap-4,twitter-bootstrap-4,Twitter Bootstrap,Css,Bootstrap 4,Twitter Bootstrap 4,在移动模式下,如何在Bootstrap 4中的汉堡图标和徽标下方放置列表元素“Home”?我尝试将徽标显示为style=“display:block”,但不起作用 <div class="container"> <nav class="navbar navbar-light bg-faded"> <button class="navbar-toggler hidden-sm-up float-xs-left" type="button" dat
<div class="container">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up float-xs-left" type="button"
data-toggle="collapse" data-target="#navbar-header"
aria-controls="navbar-header"
aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand hidden-md-up" href="/">Logo</a>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<ul class="nav navbar-nav">
<a class="navbar-brand hidden-sm-down" href="/">Logo</a>
<li class="nav-item {% block navhome %}{% endblock %}">
<a class="nav-link float-left" href="/">Home <span
class="sr-only">(current)</span></a>
</li>
-
如果你想让它垂直堆叠(就像在3.x中那样),你必须为Bootstrap4添加一些额外的CSS
@media(max-width:576px) {
.navbar .navbar-nav>.nav-item {
float: none;
margin-left: .1rem;
}
.navbar .navbar-nav {
float:none !important;
}
.navbar .collapse.in, .navbar .collapsing {
clear:both;
}
}
另外,请参见中的解释。参见此答案