Bootstrap 4 - 如何将元素向右浮动直到它移动到它自己的行？

Question

我是 Bootstrap 的新手，并且能够找到 only one other person 问过这个问题的人。他们没有得到有效答案，所以我再问一次。

我有两个按钮组。在更大的屏幕尺寸上，它们应该出现在同一行上，一个左对齐，一个右对齐。当屏幕变得足够小时，右对齐的元素会下降到下一行。这目前正在按预期工作。当前不起作用的是我希望在发生这种转变时右对齐的元素变为左对齐。我（以及上面的 post）遇到的问题是其中一个元素是动态调整大小的，因此简单地使用 Bootstrap 断点不是一种选择。需要根据右对齐按钮组可用的大小动态调整，而不是相关 window 的绝对大小。

我现在的HTML在下面。

<div class = "btn-group grouped-buttons btn-group-toggle" data-toggle="buttons" style = "margin: 25px">
    <!-- Dyanimcally sized button group left alligned-->
    <button *ngFor = "let type of typeList" class = "btn btn-default" type = "button" (click) = "catagoryFilter(type.name)" [ngClass] = "{'active': typeSelect == type.name}">{{type.name}}</button> 
</div>
<div class = "btn-group grouped-buttons btn-group-toggle float-right" data-toggle="buttons" style = "margin-top: 25px">
    <!-- Fixed size button group which should only float-right when not on its own line -->
    <button class="btn btn-red" type="button" (click)="newSpeciesModal.show()"><fa-icon [icon]="addIcon"></fa-icon> New Species</button>
    <button class="btn btn-blue" type="button" (click)="newSpeciesTypeModal.show()"><fa-icon [icon]="addIcon"></fa-icon> New Species Type</button>
</div>

Answer 1

您可以将元素放入具有 display: flex.

的容器中

如果你给它 justify-content: space-between 这将确保第二个元素在最右边，当两个元素都在同一行时。

同时添加 flex-wrap: wrap 确保如果没有足够的 space 第二个元素将向下（向左）移动。

这是一个简单的例子：

body {
  width: 100vw;
  height: 100vh;
}

.container {
  width: 100%;
  height: 20%;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.container :nth-child(1) {
  height: 100%;
  background-color: red;
}

.container :nth-child(2) {
  width: 20%;
  height: 100%;
  background-color: blue;
}

<div class="container">
  <div style="width:30%;"></div>
  <div></div>
</div>
<div class="container">
  <div style="width:90%;"></div>
  <div></div>
</div>

Bootstrap 4 - 如何将元素向右浮动直到它移动到它自己的行？

Bootstrap 4 - How to float-right an element until it moves to its own line?

html

css

twitter-bootstrap

bootstrap-4