jquery - Bootstrap 将所有 div 放在一行中

Question

我试图将用户列表放在左侧，将搜索框和按钮放在同一行的右侧

<div class="row">
  <div class="col-md-4">
    <div class="user-title">User List-5</div>
  </div>
  <div class="col-md-8">
    <div class="input-group user-search-box col-md-6">
      <input type="text" class="form-control" placeholder="Search" aria-describedby="basic-addon2">
      <span class="input-group-addon input-search-custom-adon" ><i class="fa fa-search" aria-hidden="true"></i></span>
    </div>
    <div class="add-new-user col-md-6">
      <a class="btn  add-new-user" href="#" role="button">ADD NEW USER</a>
    </div> 
  </div>
</div>

我尝试使用 float:left 然后添加按钮将首先显示而不是搜索框 谁能帮帮我

Answer 1

这段代码非常适合你 HTML 是这样的

 <div class="row">
     <div class="col-md-4">
         <div class="user-title">User List-5</div>
     </div>
     <div class="col-md-8 right-col">
         <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" aria-describedby="basic-addon2">
            <span class="input-group-addon input-search-custom-adon"><i class="fa fa-search" aria-hidden="true"></i></span>
         </div>
         <div class="add-new-user"> <a class="btn  add-new-user" href="#" role="button">ADD NEW USER</a></div>
     </div>
 </div>

像这样的 CSS

  .right-col {
    display: flex; justify-content: flex-end;
  }
  .input-group {
    max-width: 520px;
  }