html - Bootstrap CSS float 在某些div上不起作用

我想把几件东西排成一行
我希望布局像这样，即使减少了浏览器的大小

基本上，这个图像布局有点不同，但是它显示了一个创建新用户和操作，所以操作就像我的“管理批量用户”
我只希望项目对齐或向右浮动，这样如果浏览器大小减小，就不容易堆叠在一起

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Choose your preferred criteria values and click Search
    </div>

    <div class="col-md-8 margin-top-bottom-8">

      <div class="col-md-6 float-right">
        <img src="assets/images/addIcon.svg" (click)="createNewUser()" />
        <span (click)="createNewUser()">Create New User</span>
      </div>

      <div class="col-md-6 float-right">
        <img src="assets/images/bulkUploadIcon.svg" (click)="openEditPopup(role)" />
        <span (click)="openEditPopup(role)">Manage Bulk Users</span>
      </div>

    </div>
  </div>

</div>

下面是我的代码
https://jsfiddle.net/03vxqed9/

最佳答案

你需要使用左拉和右拉而不是浮动。参见下面的片段。
使用clearfix类重置浮动元素。
希望这对你有用！

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4 pull-left">
      Choose your preferred criteria values and click Search
    </div>

    <div class="col-md-8 margin-top-bottom-8 pull-right">

      <div class="col-md-6 pull-right">
        <img src="assets/images/addIcon.svg" (click)="createNewUser()" />
        <span (click)="createNewUser()">Create New User</span>
      </div>

      <div class="col-md-6 pull-right">
        <img src="assets/images/bulkUploadIcon.svg" (click)="openEditPopup(role)" />
        <span (click)="openEditPopup(role)">Manage Bulk Users</span>
      </div>

    </div>
    <div class="clearfix"></div>
  </div>

</div>