Question

我正在使用Bootstrap 4导航栏，其中包含从左到右：

徽标（品牌）
搜索栏
网站的导航

我希望搜索框在徽标和导航之间的可用空间中展开。到目前为止我的代码：

.navbar {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  background: #191919;
}
.navbar-inverse .navbar-nav a {
  text-transform: uppercase;
}
.navbar-inverse .navbar-nav .nav-link {
  color: #fff;
}
.navbar-inverse .navbar-nav .dropdown-menu {
  padding: 0;
  border-radius: 0;
  top: 47px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
.navbar-inverse .navbar-nav .dropdown-menu a {
  padding: 11px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  color: #757575;
}
.navbar-inverse .navbar-nav .dropdown-menu a:hover {
  color: #555;
}
.navbar-inverse .navbar-nav .dropdown-menu a:last-child {
  border-bottom: none;
}

.navbar-inverse .form-inline {
  display: block;
  width: auto;
}
.navbar-inverse .form-inline .bg-white {
  background: #fff;
  border: none;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 1px;
  height: 37px;
}
.navbar-inverse .btn-outline-secondary {
  border: 1px solid #fff;
  color: #fff;
}
.navbar-inverse .btn-outline-secondary:hover {
  background: #fff;
  color: #0275D8;
}
.container {
  margin-top: 56px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


<nav class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-primary">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <form class="form-inline mx-auto">
      <div class="input-group">
        <input class="form-control border-right-0" placeholder="Search here...">
        <span class="input-group-addon bg-white border-left-0"><i class="fa fa-search"></i></span>
      </div>
    </form>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-folder-open" aria-hidden="true"></i>
 Categories</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Sports</a>
          <a class="dropdown-item" href="#">Hot</a>
          <a class="dropdown-item" href="#">Mad Science</a>
        </div>
      </li>
      <li>
        <a href="#" class="btn btn-outline-secondary"><i class="fa fa-user"></i> My account</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus mollitia, minima aliquam soluta ducimus sint obcaecati rerum inventore, ipsa nobis dignissimos, reiciendis, numquam cum sit cumque suscipit voluptatibus a est?</p>
</div>

搜索框太小，您可以在宽屏上看到。我希望左侧距徽标 15px，而右侧距导航 15px。缺少什么？

Answer 1

您使用的是Bootstrap 4 alpha ，现在完全过时了。

此外，如果希望表单输入跨越全宽，则不希望使用form-inline类。该类的设计精确到阻止形式输入跨越全宽。

这是一个完整的，有效的代码片段，可以满足您的需求（您必须根据需要调整颜色）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar navbar-dark sticky-top bg-dark flex-wrap2 flex-md-nowrap p-0">
<!--        <div class="container-fluid">-->
        <a class="navbar-brand col-auto mr-0" href="#">Brand</a>

        <button class="navbar-toggler d-md-none mt-1 mr-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="input-group py-1 px-2 px-md-0">
            <input class="form-control form-control-dark" type="text" placeholder="Search here..." aria-label="Search">
            <div class="input-group-append">
                <button class="btn btn-outline-success" type="submit"><i class="fa fa-search"></i></button>
            </div>
        </div>

        <ul class="navbar-nav navbar-expand-md pl-2 pr-3">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto text-nowrap">
                    <li class="nav-item my-1 active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item dropdown my-1">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-folder-open" aria-hidden="true"></i>
                            Categories
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Sports</a>
                            <a class="dropdown-item" href="#">Hot</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Mad Science</a>
                        </div>
                    </li>
                    <li class="nav-item my-1">
                        <a href="#" class="nav-link btn btn-outline-secondary"><i class="fa fa-user"></i> My account</a>
                    </li>
                </ul>
            </div>
        </ul>
<!--        </div>-->
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

您可能希望将整个内容包装在container或container-fluid中。在这种情况下，只需取消注释相应的div。

另请注意使用自适应填充和边距类来控制间距。例如，my-1为导航栏项提供1个单位的垂直边距，px-2 px-md-0提供从最小屏幕开始的2个单位的水平填充（到输入组），同时减少水平填充从中（md）屏幕开始为零。

使Bootstrap 4导航栏搜索框拉伸整个可用空间

1 个答案: