Question

我正在使用bootstrap 4，我有一个用于小屏幕的导航栏，我想要一个搜索输入组，从左边一直到右边，我有菜单栏图标。我在这里做了JSFiddle。如何使输入组具有灵活性并占用菜单栏后面左侧的剩余空间？

我似乎无法获取输入组中的输入以获取表单包装器的整个宽度，我尝试将margin-right设置为与menu-bar相同的宽度但是没有'因为，输入组内的输入没有占据整个宽度。如何实现所需的布局？

这是导航栏：

@media (max-width: 767px) {
  .navigation-container .form-wrapper {
    width: 100%;
    margin-right: 32px;
  }
  .navigation-container .menu-button {
    position: absolute;
  }
  .navigation-container .navbar {
    height: 50px;
  }
}
.navigation-container .nav-link {
  padding: 0;
}
.navigation-container .navbar {
  background: #fff;
  flex-direction: inherit;
  align-items: center;
  padding: 0;
}
.navigation-container .navbar .btn {
  font-size: 14px;
}
.navigation-container .navbar .right-side-bar #nav-icon1 {
  width: 22px;
  top: 10px;
  right: 10px;
  cursor: pointer;
  padding: 0.85rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #008489;
  border-radius: 8px;
  opacity: 1;
  left: 0;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(1) {
  top: 0.3rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(2) {
  top: 0.8rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(3) {
  top: 1.3rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(1) {
  top: 0.8rem;
  background: #008489;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(3) {
  top: 0.8rem;
  background: #008489;
}
.navigation-container input {
  border: 0;
}
.navigation-container i {
  color: #008489;
  font-size: 28px;
}
.navigation-container .input-group-addon {
  background: #fff;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.search-button {
  background: transparent;
  border: 0;
}
.search-button i {
  font-size: 22px;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<div class="navigation-container">
  <div class="container top-menu">
    <nav class="navbar navbar-light bg-faded">
        <div class="hidden-md-up nav-small">
          <div class="form-wrapper">
            <form action="/search" method="get">
              <div class="input-group">
                <span class="input-group-addon">
                  <button type="submit" class="search-button">
                    <i class="ion-ios-search-strong"></i>
                  </button>
                </span>
                <input type="text" name="q" class="search-input form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
              </div>
            </form>
          </div>
          <div class="right-side-bar">
            <div id="nav-icon1" class="menu-button hidden-md-up">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>

        <div class="navbar-collapse collapse justify-content-between" id="navbar5">
            <form action="/search" method="get" class="my-auto d-inline mx-auto col-md-8" role="search">
                <div class="input-group big-screen-search-form">
                  <span class="input-group-addon" id="basic-addon1">
                    <button type="submit" class="search-button">
                      <i class="ion-ios-search-strong"></i>
                    </button>
                  </span>
                  <input type="text" id="search-input" name="q" class="search-input form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
                </div>
            </form>
            <ul class="navbar-nav my-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="ion-ios-gear-outline"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Admin dashboard</a>
                        <a class="dropdown-item">
                            Log out
                        </a>
                    </div>
                </li>     
            </ul>
        </div>
    </nav>
  </div>
</div>

Answer 1

问题是你的内部.nav-small没有获得flex属性，所以它没有调整大小。如果我给它flex增长（1 0 0）并且还使它显示：flex以使其内部部件正确定位，它可以工作。

这是一个小提琴：https://jsfiddle.net/s1vz7xt3/5/ - 我只是添加了

.nav-small {
      flex: 1 0 0;
      display: flex;
}

Answer 2

如果您不想使用 flex ，您可以使用宽度计算并为汉堡包按钮腾出空间：

.nav-small { width: calc(100% - 40px); }

如何使输入组填充水平空间？

2 个答案: