问题描述
此代码显示了我创建导航栏的尝试，但是我可以找到一种正确放置所有内容的方法。我已尝试将col-md-3用于多个元素，但无法定位它们。我想知道您是否能够将搜索栏放在中间，链接向右对齐。
What I would like to acheive
错误代码如下。
谢谢！
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>NavBar</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<ul class="navbar-nav ">
<li class="nav-item">
<a href="" class="nav-link navbar-brand ">Home</a>
</li>
<li class="nav-item">
<form class="mx-auto order-0">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon"
aria-describedby="button-addon1">
</li>
<li class="nav-item">
<a href="" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Link2</a>
</li>
</form>
</li>
</ul>
</body>
</html>解决方法
我建议您查看Bootstrap的excellent documentation on their Navbar component，因为它可以更好地使您真正个性化Bootstrap布局。复习它们的utility documentation也无害，因为几个实用程序类非常适合实现您的布局。
您可以通过多种方法来实现所需的布局，以下是我在保持内置导航栏功能的同时如何进行布局的方法：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand pr-lg-5" href="#">Shopping District 1</a>
<button class="navbar-toggler" 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="collapse navbar-collapse" id="navbarSupportedContent">
<form class="flex-fill my-2 my-lg-0 mx-lg-4">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
</div>
</div>
</form>
<ul class="navbar-nav mr-auto ml-lg-5">
<li class="nav-item"><a href="" class="nav-link">Link</a></li>
<li class="nav-item"><a href="" class="nav-link">Link2</a></li>
</ul>
</div>
</nav>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
在上面的代码示例中，我包含了Bootstrap的类要求，以使您的导航菜单在较小的屏幕上折叠，以及允许切换行为的其他组件。
我也将.navbar-brand，form和.navbar-nav项分开了，因为没有理由将它们强制放入同一列表中。 Navbar使用Flexbox进行布局，因此每个子元素都已经相应地对齐了。
对于更精细的结构，我已经声明了两个margin和padding实用程序类（pr-lg-*,mx-lg-*等），以帮助创建插图所建议的间距。通过使用-lg-变体，这些将仅适用于较大的设备。
因此，我能够对其进行修改，使其获得与我所寻找的结果类似的结果！
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>NavBar</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<ul class="navbar-nav pl-2">
<li class="nav-item">
<a href="" class="nav-link navbar-brand ">District 1</a>
</li>
<div class="mx-auto">
<form class="mx-auto order-0 col px-md-5">
<div class="mx-auto input-group mt-1">
<div class="input-group-prepend" style="margin-left: 380px;">
<button class="btn btn-outline-secondary" type="button" id="button-addon1"><img
src="https://img.icons8.com/pastel-glyph/2x/search--v2.png" alt="Search" class="mx-auto" width="20"
height="20"></button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</form>
</div>
</ul>
<ul class="navbar-nav ml-auto ">
<li class="nav-item" style="padding-right: 120px;">
<a id="one" href="" class="nav-link">Link</a>
</li>
<li class="nav-item mr-5">
<a id="two" href="" class="nav-link">Link2</a>
</li>
</li>
</ul>
</body>
</html>