Question

我是BS4的新手，当我的网站在移动设备上使用时，我无法找到关于如何使切换菜单居中的答案？

This is an example of what i'm looking to achieve

<body>
    <div class="container-fluid">
        <nav class="navbar-expand-lg navbar navbar-light">
            <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span>Menu</button>

            <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="about.html">ABOUT</a>
                    </li>




                    <li class="nav-item">
                        <a class="nav-link" href="Contact.html">CONTACT</a>
                    </li>


                    <li class="nav-item active">
                        <a class="btn btn-outline-primary" href="https://spartan-safety-limited.gogecko.com/users/login">TRADE ACCOUNT</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!--CAROUSEL-->
</body>

CSS

.navbar-toggler {

   font-family: 'Open Sans', sans-serif;
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: #FF6600 ;
    border: 1px solid transparent;
    border-radius: 0;
    margin-right: 50px;
    text-align: center;
}


.navbar-light .navbar-toggler{
  color: #ffffff;
}

Answer 1

要将此导航栏置于移动设备中心的方式与链接网站相同，您需要在display: block，margin-left: 0和margin-right: 0上设置{ {1}}和.navbar。所有这些都在媒体查询之外。然后在媒体查询内部，我们希望将这些样式设置回其整页视图。

这将使页面中的整体.navbar-toggler和.navbar元素内的.navbar-toggler按钮居中。

＆＃13;

.navbar

＆＃13;

.navbar-toggler {
  font-family: 'Open Sans', sans-serif;
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: #FF6600;
  border: 1px solid transparent;
  border-radius: 0;
  margin-right: 50px;
  text-align: center;
}

.navbar-light .navbar-toggler {
  color: #ffffff;
}


/* New styles */

.navbar {
  margin-left: auto;
  margin-right: auto;
}

.navbar-toggler {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.navbar-nav {
  list-style-type: none;
  padding: 0;
}

@media (min-width: 768px) {
  .navbar {
    margin-left: 0;
    margin-right: auto;
  }
  .navbar-toggler {
    display: inline-block;
    margin-left: 0;
    margin-right: auto;
  }
}

＆＃13;

折叠时将BS切换菜单居中

1 个答案: