html - 在移动 View 上左右交换 div

Question

我希望标题栏包含如下三个元素

但在移动 View 中，我希望菜单(切换图标)向左移动，而 Logo 应位于中间。我试过推拉。但这对我不起作用。无论如何我可以做到这一点吗？

这是我的代码。仅供引用，我还没有添加任何单独的媒体查询。仅使用 Bootstrap 类。

<div class="row d-flex flex-nowrap" style="background-color: #2B3536;">
    <div class="col-lg-1 col-md-1 col-sm-2 col-2 align-self-center"><img src="https://dummyimage.com/127x50/2b3536/fff"></div>
    <div class="col-lg-8 col-md-9 col-sm-8 col-8 order-sm-first">
        <nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-expand-sm">
            <div class="container d-flex flex-row flex-md-nowrap flex-wrap">
              <a href="#" class="hidden-md-up mr-3" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false">
                <i class="fa fa-bars fa-lg text-white"></i>
              </a>
              <!--<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>-->
              <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav header-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Menu 1</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Menu 2</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Menu 3</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Menu 4</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                  </li>
                  <!--<li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Dropdown link
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </li>-->
                </ul>
              </div>
            </div>
        </nav>
    </div>
    <div class="col-lg-3 col-md-2 col-sm-2 col-2 align-self-center">
        <div class="input-group">
          <input class="form-control hidden-md-down"
                 placeholder="I'm looking for">
          <div class="input-group-addon top-search-addon"><i class="fa fa-search fa-search-white"></i></div>
        </div>
    </div>
</div>

Answer 1

你应该将媒体查询添加到样式 css 文件中

.navbar-brand{
   padding-top:8px;
 }
.navbar-brand img{
   height:35px;
    width:35px
}

@media (max-width:767px) {
  .navbar-brand{
    position: absolute;
    left: 40%;
  }
}

.navbar-toggle {
  float: left;
}

您可以查看实时演示 menu design