引导将所有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>

我已经尝试过使用浮动:左然后添加按钮将首先显示，而不是搜索框，谁能帮助我？

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;
  }

Answer 2

我在小提琴里编了你的密码。似乎有您所需要的，但只有在992 of的视口宽度。这是因为您使用的是col-md-4，所以布局只在视图宽度之后才能保持tru。

如果您希望它也适用于较小的屏幕，请尝试使用

col-sm-4 or col-xs-4 for user list

col-sm-8 or col-xs-8 for search and button div

注意:一旦为较低的视图指定了md，它就会占用12列/100%容器的全部宽度。

如果只有在992 px之后才需要它，那么下面是更新的代码引导方式:P.您可能是通过将输入组和col类组合在一起错误的。

<div class="row">
  <div class="col-md-4">
    <div class="user-title">User List-5</div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-offset-4 col-md-6">
        <div class="input-group user-search-box">
          <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>
      <div class="col-md-2">
        <div class="add-new-user">
          <a class="btn  add-new-user" href="#" role="button">ADD NEW USER</a>
        </div>  
      </div>
    </div>
  </div>
</div>

希望这能有所帮助。

Answer 3

您所需要做的就是在搜索框中使用float: left和按钮上的float: right使两个元素相互浮动。如果您不想使用CSS，也可以使用内置的Bootstrap 帮助者类 pull-left和pull-right。只需在搜索框上设置pull-left，在按钮上设置pull-right：

<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 pull-left">
      <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 pull-right">
      <a class="btn  add-new-user" href="#" role="button">ADD NEW USER</a>
    </div>  
  </div>
</div>

我创建了一个显示这个BootPly的这里。

希望这会有帮助！)