Question

我已经制作了一个带有引导程序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-->

Answer 1

我在codepen中检查了这个问题。在移动视图中给出“margin：0 auto;”到你的按钮。您的问题将得到解决。

使用Bootstrap4在我的扩展切换按钮上留下了边距

1 个答案: