Question

我在我的反应应用程序中使用引导导航栏，代码如下 -

 <nav className="navbar navbar-default navbar-expand-sm navbar-light bg-light">
      <div className="container-fluid">
        <div className="navbar-header">
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <NavLink className="navbar-brand mx-auto" to="/">
            <h4>Crafting Social Minds</h4>
          </NavLink>
        </div>
        <div
          className="collapse navbar-collapse me-auto"
          id="navbarTogglerDemo03"
        >
          <ul className="navbar-nav ms-auto navbar-custom">
            <li className="nav-item">
              <NavLink
                className="nav-link"
                exact
            
                to="/"
              >
                Organised Events
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                className="nav-link"
                to="/upcoming-events"
              >
                Upcoming Events
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                className="nav-link"
             
                to="/new-event"
              >
                New Event
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                className="nav-link"
               
                to="/about"
              >
                About Us
              </NavLink>
            </li>
          </ul>
          {/* <div className="social-part">
            <i className="fa fa-facebook" aria-hidden="true"></i>
            <i className="fa fa-twitter" aria-hidden="true"></i>
            <i className="fa fa-instagram" aria-hidden="true"></i>
          </div> */}
        </div>
      </div>
    </nav>

对于大中型设备，导航栏看起来像这样 -

对于小型设备，相同的导航栏如下所示-

因此，对于大型（和中型）设备，导航栏看起来与我预期的一样，但对于小型设备，切换导航栏按钮出现在品牌名称上方，而我希望它出现在左侧或左侧品牌名称的权利。有没有什么办法可以在不更改仅使用引导程序类的大型设备的视图的情况下解决此问题？

Answer 1

您使用的是 me-auto 和 ms-auto（边距结束和边距开始），但这些用于 Bootstrap 5。Bootstrap 4 使用 mr-auto 和 ml-auto（您帖子上的标签表示 bootstrap-4） .

如果你想要左边的按钮和右边的品牌名称，你应该用 mr-0 mr-md-3 覆盖正常的边距，尽管你名字上的 h4 样式，它只适合 320 像素宽屏显示。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container-fluid">
        
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand mr-0 mr-md-3" href="#">
            <h4>Crafting Social Minds</h4>
        </a>
        <div class="collapse navbar-collapse mr-auto" id="navbarTogglerDemo03">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Organised Events <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Upcoming Events</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">New Event</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About Us</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

如何将引导程序导航栏切换按钮与品牌名称的左侧或右侧对齐？

1 个答案: