html - 使用 Bootstrap4 在我展开的切换按钮上留边距

Question

我用 bootstrap 4 制作了一个响应式导航栏。我将它在平板电脑和移动 View 的中心对齐(在桌面左侧)。

但是，当我展开它时，该按钮占用了我无法删除的左边距。我已经在导航、许多 div 和按钮上尝试了 margin-left 0px 但它不起作用 it always keep the margin-left .我也尝试过放置一个 !important 并使我的类(class)更加具体。

非常感谢您的帮助。

你可以在这里看到我的整个页面: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 中检查了这个问题。在移动 View 中给出“margin: 0 auto;”到你的按钮。您的问题将得到解决。