如果我有一個引導網格。盡管有 gy-5，但行之間沒有空間
但是，如果我更改為，則有空間。但這對我來說沒有意義，為什么我要一行 3 行？我不明白這是如何作業的。
在這里擺弄：https ://jsfiddle.net/xpusostomos/03wqa5x6/2/
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="grid">
<div class="row gy-5">
<div class="col-md-2">
Select:
</div>
<div class="col-md-4">
<label class="form-check-label" for="mapped">
<input id="mapped" class="form-check-input" type="checkbox" [(ngModel)]="mapped"
(change)="change(true)"/>
Mapped</label>
</div>
<div class="col-md-5">
<label class="form-check-label" for="unmapped">
<input id="unmapped" class="form-check-input" type="checkbox" [(ngModel)]="unmapped"
(change)="change(true)"/>
Unmapped</label>
</div>
</div>
<div class="row gy-5">
<div class="col-md-2">
Show:
</div>
<div class="col-md-4">
<label class="form-check-label" for="summary">
<input id="summary" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="false"
(change)="change(false)"/>
Summary</label>
</div>
<div class="col-md-5">
<label class="form-check-label" for="detail">
<input id="detail" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="true"
(change)="change(false)"/>
Detail</label>
</div>
</div>
<div class="row gy-5">
<div class="col-md-2">
Group:
</div>
<div class="col-md-10">
<label class="form-check-label" for="detail">
<input id="mapGrouped" class="form-check-input" type="checkbox" [(ngModel)]="mapGrouped"
[value]="true" (change)="change()"/>
Mapped Status</label>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>uj5u.com熱心網友回復：
排水溝用于列而不是行之間的間距。因此，如果您希望列垂直堆疊時的垂直間距，那么您的列應該都在同一行中......
<div class="container">
<div class="row gy-5">
<div class="col-md-2"> Select: </div>
<div class="col-md-4">
<label class="form-check-label" for="mapped">
<input id="mapped" class="form-check-input" type="checkbox" [(ngModel)]="mapped" (change)="change(true)" /> Mapped</label>
</div>
<div class="col-md-5">
<label class="form-check-label" for="unmapped">
<input id="unmapped" class="form-check-input" type="checkbox" [(ngModel)]="unmapped" (change)="change(true)" /> Unmapped</label>
</div>
<div class="col-md-2"> Show: </div>
<div class="col-md-4">
<label class="form-check-label" for="summary">
<input id="summary" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="false" (change)="change(false)" /> Summary</label>
</div>
<div class="col-md-5">
<label class="form-check-label" for="detail">
<input id="detail" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="true" (change)="change(false)" /> Detail</label>
</div>
<div class="col-md-2"> Group: </div>
<div class="col-md-10">
<label class="form-check-label" for="detail">
<input id="mapGrouped" class="form-check-input" type="checkbox" [(ngModel)]="mapGrouped" [value]="true" (change)="change()" /> Mapped Status</label>
</div>
</div>
</div>
https://codeply.com/p/kTJczRmHhq
了解在單個列中使用超過 12 個列單元.row會創建一個“虛擬”行，這本質上是回應式 Bootstrap 網格的作業方式。
注意：grid類是 for which 是 for which is for ( )display:grid的替代品，因此您可以使用其中一個或另一個，而不是兩者都使用。rowdisplay:flex
uj5u.com熱心網友回復：
檢查您的 JSFiddle，看起來margin-top行是問題，因為它提供了一個負值：
margin-top: calc(-1 * var(--bs-gutter-y));
所以你必須擺脫這個錯誤的計算margin-top，一切都應該正常作業。例如，您可以將m-auto類添加到您的行或margin-top在您自己的 CSS 檔案中修復。
<div class="container grid overflow-hidden">
<div class="row g-5 m-auto">
<div class="col-md-2">
Select:
</div>
<div class="col-md-4">
<label class="form-check-label" for="mapped">
<input id="mapped" class="form-check-input" type="checkbox" [(ngModel)]="mapped"
(change)="change(true)"/>
Mapped</label>
</div>
<div class="col-md-5">
<label class="form-check-label" for="unmapped">
<input id="unmapped" class="form-check-input" type="checkbox" [(ngModel)]="unmapped"
(change)="change(true)"/>
Unmapped</label>
</div>
</div>
<div class="row g-5 m-auto">
<div class="col-md-2">
Show:
</div>
<div class="col-md-4">
<label class="form-check-label" for="summary">
<input id="summary" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="false"
(change)="change(false)"/>
Summary</label>
</div>
<div class="col-md-5">
<label class="form-check-label" for="detail">
<input id="detail" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="true"
(change)="change(false)"/>
Detail</label>
</div>
</div>
<div class="row g-5 m-auto">
<div class="col-md-2">
Group:
</div>
<div class="col-md-10">
<label class="form-check-label" for="detail">
<input id="mapGrouped" class="form-check-input" type="checkbox" [(ngModel)]="mapGrouped"
[value]="true" (change)="change()"/>
Mapped Status</label>
</div>
</div>
</div>
不知道這個問題來自哪里。它可能只在 Fiddle 中嗎？我從來沒有遇到過 BS 網格的問題。或者，您可以定義網格間隙來解決問題。
uj5u.com熱心網友回復：
不得不提col里面row。請查看以下解決方案。
參考：https ://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-4">
<div class="p-3">blah</div>
</div>
<div class="col-4">
<div class="p-3">stuff</div>
</div>
<div class="col-4">
<div class="p-3">rubbish</div>
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464168.html