Question

我下面有这个navbar，我想使搜索字段的形式为全角，因此它会尽可能扩大导航栏，而不会妨碍其他操作。

我该怎么做？

我尝试了几种不同的方法，例如设置不同元素的宽度，但似乎无济于事。

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" [routerLink]="['/home']">Web App</a>

    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false">        <span class="navbar-toggler-icon"></span>      </button>

    <div class="collapse navbar-collapse" id="test">
      <ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/register']">Register</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/login']">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

添加并浮动在以下元素上：

width: 100px;
float: right;

CSS：

text-align: center

您设置的浮点数不起作用，因为元素的宽度为100％。您还可以设置margin-right，但要取决于您希望文本如何开始。

要立即正确对齐，请使用margin-left和form, input { width: 100%; }将其显示在您想要的位置。

编辑： 要具有全宽搜索栏：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
	<div class="container">
		<div class="row w-100">
			<a class="col-2 navbar-brand" [routerLink]="['/home']" style="max-width:100px">Web App</a>

			<form class="col form-inline">
				<input class="form-control mr-sm-2 w-100" type="search" placeholder="Search" aria-label="Search">
      </form>
      
      <button class="col-1 navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false" style="min-width:50px">        
        <span class="navbar-toggler-icon"></span>      
      </button>      
      
      <div class="col-1 collapse navbar-collapse" id="test">
         <ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
            <li class="nav-item">                
              <a class="nav-link" [routerLink]="['/register']">Register</a>              
            </li>
            <li class="nav-item">                
              <a class="nav-link" [routerLink]="['/login']">Login</a>              
            </li>
         </ul>
      </div>
      </div>
   </div>
</nav>

编辑2：

{{1}}

Answer 2

这可以通过display:flex;并将相关元素包装在divs中来实现。我将第一个和第二个div设置为flex-shrink:1;，这意味着它们会缩小到div的内容。然后，我在第二个div中添加了flex-grow: 1;，以便填充剩余的空间。

我还在输入字段中添加了width:100%;。

.flex {
  display:flex;
}
.flex > div {
  padding:0 5px;
  flex-shrink:1;
}
.flex > div:nth-child(2) {
  flex-grow: 1;
}
input {
  width:100%;
}
.collapse {
  display:none;
}

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
  <div class="container flex">
    <div>
      <a class="navbar-brand" [routerLink]="['/home']">Web App</a>
    </div>
    <div>
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>
    </div>
    <div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false">        <span class="navbar-toggler-icon">Menu</span>      </button>

      <div class="collapse navbar-collapse" id="test">
        <ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" [routerLink]="['/register']">Register</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" [routerLink]="['/login']">Login</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

使我的导航栏表单搜索字段全宽

2 个答案: