我已经制作了一个带有引导程序4的响应式导航栏。我已将它在平板电脑和移动视图的中心对齐(在桌面左侧)。
但是,当我展开它时,按钮会留下一个我无法删除的边距。我在导航栏,许多div和按钮上尝试了margin-left 0px
,但它不起作用it always keep the margin-left。我也试过放置一个!重要的,并且对我的课程更加具体。
我真的很感谢你的帮助。
您可以在此处查看我的整个页面:https://codepen.io/MiaSalazar/pen/GxBgRe
/*menu principal lateral*/
ul .no-list {
padding-bottom: 2px;
}
.menu-principal {
text-align: right;
padding-bottom: 5px;
padding-left: 0px;
font-size: 15px;
list-style-type: none;
-webkit-transition: width 4s; /* Safari */
transition: width 4s;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #b47068;
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
color: #b47068;
}
.navbar-dark .navbar-nav .nav-link {
color: #a59391;
}
.nav-menu {
text-decoration: none;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-family: "Merriweather";
font-weight: 200;
float: right;
border-right: 2px solid #a59391;
line-height: 1.5;
letter-spacing: 1px;
}
.nav-menu-last {
border-right: 0px;
}
nav a:hover {
color: #b47068;
text-decoration: none;
}
.list-inline li {
display: inline;
width: auto;
}
.linea2 {
display: block;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 1.7rem;
padding-left: 1.5rem;
padding-bottom: 0.5rem;
}
.navbar-toggler {
border-width: 0px;
background-color: #b47068;
}
.navbar-expand-lg .navbar-nav .nav-link:hover {
font-size: 20px;
}
@media screen and (max-width: 991px) {
.nav-menu {
border-right: 0px;
margin: auto;
}
.linea2 {
display: inline;
}
.nav-menu {
padding-top: 10px;
}
.xs-center {
display: flex;
justify-content: center;
padding-top: 20px;
}
.navbar-toggler:focus {
outline: none;
}
.ml-auto,
.mx-auto {
margin-left: 0px;
}
div .navbar-collapse .collapse show {
padding-top: 5px;
}
div nav button .toggle-center{
margin-left: 0px;
}
}
<!--Menu-->
<nav class="navbar navbar-expand-lg menu-principal navbar-toggleable-sm navbar-dark navbar-right d-flex" role="navigation">
<button class="navbar-toggler navbar-toggler-right ml-auto toggle-center " type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav no-list">
<li class="nav-item list-inline ">
<a class="nav-link nav-menu" href="#"><span class="linea1">1</span><span class="linea2"> 1</span> </a> </li>
<!--dropdown-->
<li class="nav-item dropdown list-inline">
<a class="nav-link dropdown-toggle nav-menu" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="linea1">1</span><span class="linea2"> 2</span> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Cosa 1</a>
<a class="dropdown-item" href="#">Cosa 2</a>
<a class="dropdown-item" href="#">Cosa 3</a>
</div>
</li>
<!--dropdown final-->
<li class="nav-item list-inline ">
<a class="nav-link nav-menu " href="#"><span class="linea1">1</span><span class="linea2"> 3</span> </a> </li>
<li class="nav-item list-inline ">
<a class="nav-link nav-menu nav-menu-last" href="#"><span class="linea1">1</span><span class="linea2"> 4</span> </a> </li>
</ul>
</div>
</nav>
<!--<fin-menu-->
<!--FIN HEADER-->
答案 0 :(得分:0)
我在codepen中检查了这个问题。在移动视图中给出“margin:0 auto;”到你的按钮。您的问题将得到解决。