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

Question

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

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

下面是我当前的 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 可确保如果空间不足，第二个元素将向下（向左）移动。

这是一个简单的例子：

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>