Question

我试图连续漂浮几件物品

我希望布局看起来像这样，即使缩小浏览器大小

基本上这个图片布局有点不同，但它显示了创建新用户和操作，因此Action就像我的管理批量用户＆＃34;

我只是希望项目对齐或浮动到右侧，这样如果浏览器尺寸减小，就不会轻易堆叠在彼此之上

<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/

Answer 1

使用col-xs-6表示所有尺寸（从最小到最大）

并使用pull-right / pull-left代替float

float不适用于flex（row是灵活的）

＆＃13;

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

＆＃13;

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-4  pull-left">
      Choose your preferred criteria values and click Search
    </div>

    <div class="col-xs-8 margin-top-bottom-8  pull-right">

      <div class="col-xs-6 pull-right">
        <img src="assets/images/addIcon.svg" (click)="createNewUser()" />
        <span (click)="createNewUser()">Create New User</span>
      </div>

      <div class="col-xs-6 pull-right">
        <img src="assets/images/bulkUploadIcon.svg" (click)="openEditPopup(role)" />
        <span (click)="openEditPopup(role)">Manage Bulk Users</span>
      </div>

    </div>
  </div>

</div>

＆＃13;

Answer 2

你需要使用左拉和右拉而不是浮动。见下面的代码段。

使用clearfix类重置浮动元素。

希望这对你有用！

＆＃13;

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

＆＃13;

Answer 3

试试这个：

HTML代码

<div class="container">
  <div class="row top-bar">
    <div class="col-md-6 panel-left"> 
        Choose your preferred criteria values and click Search 
    </div>

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

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

  </div>
</div>

<强>样式

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
  margin: 10px;
}

.top-bar {
  display:flex;width:100%;
}
.panel-right { display:flex;}
.iconx { clear:right;}

Answer 4

我希望这就是你想要的。

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

    <div class="col-md-6 pull-right">
        <div class="row">
            <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>
  </div>
</div>

一些div上的Bootstrap css浮动不起作用

4 个答案: