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

Answer 2

我用小提琴编辑了你的代码。似乎只有在992px的视口宽度之后才能拥有你需要的东西。这样做的原因是你使用的是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 helper classes 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>

我创建了一个显示此here的BootPly。

希望这有帮助！：）

Answer 4

只需强制用户框左侧浮动：

CSS ：

.user-search-box{float:left !important}

小提琴：http://www.bootply.com/9CEJvzG4y6

：

您忘记在.row

之后插入col-md-8

Bootstrap将所有div放在一行中

4 个答案: