html - 如何在 Bootstrap 上像亚马逊一样进行搜索和表单类别合并

Question

我尝试将表单搜索与 amazon.com 页面上的表单类别合并。

我试过了，是的，我正在使用 Bootstrap ，但看起来很奇怪，因为它们都有圆 Angular ，

这是我的一些代码

 <form class="form-inline my-2 my-lg-0">
       <label for="inputState"></label>
          <select id="category" class="form-control">
               <option selected>All Departements</option>
               <option>...</option>
           </select>

        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
               <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>

我希望表单搜索和表单类别合并

Answer 1

您可以将要合并的表单字段包装在类 .input-group 中。引用自:https://getbootstrap.com/docs/4.3/components/input-group/

您的 html 将是:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
 
 <form class="form-inline my-2 my-lg-0">
   <div class="input-group">
       <label for="inputState"></label>
          <select id="category" class="form-control">
               <option selected>All Departements</option>
               <option>...</option>
           </select>

        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
               <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </div>
 </form>

要使边框变圆，您可以添加自定义样式:

.form-inline .input-group .form-control.left-round {
  border-radius: 4px 0 0 4px;
}

.form-inline .input-group .form-control.right-round {
  border-radius: 0 4px 4px 0;
}

并将这些类(.right-round, .left-round)添加到 html 中，如下所示:

 <form class="form-inline my-2 my-lg-0">
   <div class="input-group">
       <label for="inputState"></label>
          <select id="category" class="form-control left-round">
               <option selected>All Departements</option>
               <option>...</option>
           </select>

        <input class="form-control mr-sm-2 right-round" type="search" placeholder="Search" aria-label="Search">
               <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </div>
 </form>