我試圖使用form-floating來獲得浮動標簽的外觀，但是當我把form-floating類放在row里面時，邊距就會被打亂。
作為比較，這是沒有row的情況（標簽看起來不錯）：
< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="style sheet"/>/span>
<div class="容器">
<div class="form-floating col-6 mb-3 mt-3 ml-auto"/span>>
< input type="text"/span> class="form-control" id="name">
<label for="name"/span>> Name</label>。
</div>/span>
</div>/span>這是用row--注意 "Name "標簽現在如何觸及輸入的左側：
< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="style sheet"/>/span>
<div class="容器">
<div class=" row">
<div class="form-floating col-6 mb-3 mt-3 ml-auto"/span>>
< input type="text"/span> class="form-control" id="name">
<label for="name"/span>> Name</label>。
</div>/span>
</div>/span>
</div>/span>在這個最小的例子中，可能不需要row，但是我想把表單放在左欄，而把其他內容放在右欄。我怎樣才能做到這一點呢？
uj5u.com熱心網友回復：
問題出在網格樣式上。 請看：
.row {
/* --bs-gutter-x: 1.5rem; */
/* bs gutter overwrites the form gutter! */
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1) 。
margin-right: calc(var(--bs-gutter-x) * -.5) 。
margin-left: calc(var(--bs-gutter-x) * -.5) 。
}
在我的瀏覽器上起作用的解決方案：
重寫溝槽。
將你包含的div元素上的gutters改寫為原來的值。
< div class="form-floating col-6 mb-3 mt-3 ml-auto gx-1"/span>>
< input type="text"/span> class="form-control" id="name">
<label for="name"/span>> Name</label>。
</div>/span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/326416.html
標籤：
上一篇：R：資料框架中的新列名，并將原始列名作為資料的一部分進行整合
下一篇：如何使餅圖的一部分透明