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

我有两个按钮组。在较大的荧屏尺寸上，它们应该出现在同一行，一个左对齐，一个右对齐。当荧屏变得足够小时，右对齐的元素会下降到下一行。这目前正在按预期作业。当前不起作用的是我希望在发生这种转变时右对齐元素变为左对齐。我（和上面的帖子）遇到的问题是其中一个元素是动态调整大小的，因此不能简单地使用 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>

uj5u.com热心网友回复：

您可以将元素放入具有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>