Bootstrap4-如何向右浮動元素直到它移動到自己的行？-有解無憂

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/407513.html

標籤：

上一篇：模態中的選項卡不可選項卡-可訪問性

下一篇：如何使選擇下拉選單寬度相同？