如何在bootstrap中設定兩行之間的空間，如果我們為每一行使用行類，設定邊距或填充非常容易。但是在將所有列設定在一個行類下時，無法設定邊距。請檢查以下代碼。
<div class="row">
<div class="col-sm-4 col-md-3"> Div 1</div>
<div class="col-sm-4 col-md-3"> Div 2</div>
<div class="col-sm-4 col-md-3"> Div 3</div>
<div class="col-sm-4 col-md-3"> Div 4</div>
<div class="col-sm-4 col-md-3"> Div 5</div>
<div class="col-sm-4 col-md-3"> Div 6</div>
<div class="col-sm-4 col-md-3"> Div 7</div>
<div class="col-sm-4 col-md-3"> Div 8</div>
<div class="col-sm-4 col-md-3"> Div 9</div>
<div class="col-sm-4 col-md-3"> Div 10</div>
</div>
在上面的代碼中，如何為每一行設定邊距？
如果代碼采用以下格式，我可以設定邊距，但不會提供回應式網格。col-md-* 和 col-sm-* 類也是浪費，我們只能使用 col-* 類。
<div class="row">
<div class="col-sm-4 col-md-3"> Div 1</div>
<div class="col-sm-4 col-md-3"> Div 2</div>
<div class="col-sm-4 col-md-3"> Div 3</div>
<div class="col-sm-4 col-md-3"> Div 4</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-3"> Div 5</div>
<div class="col-sm-4 col-md-3"> Div 6</div>
<div class="col-sm-4 col-md-3"> Div 7</div>
<div class="col-sm-4 col-md-3"> Div 8</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-3"> Div 9</div>
<div class="col-sm-4 col-md-3"> Div 10</div>
</div>
uj5u.com熱心網友回復：
在每個 div 類中，根據您的要求添加 m-1 或 m-2 以從各個方面添加邊距。使用 mt-1 或 mt-2 僅添加頂部邊距，使用 mb-1 或 mb-2 添加底部邊距。有關更多示例，請參閱此檔案。
uj5u.com熱心網友回復：
您是否嘗試過row-gap: 10px;在 CSS 檔案中使用語法？它會進入.row課堂。這應該在 div 中的每一行之間設定一個“邊距”。
uj5u.com熱心網友回復：
這正是垂直排水溝的用途......
<div class="row gy-5">
<div class="col-sm-4 col-md-3"> Div 1</div>
<div class="col-sm-4 col-md-3"> Div 2</div>
<div class="col-sm-4 col-md-3"> Div 3</div>
<div class="col-sm-4 col-md-3"> Div 4</div>
<div class="col-sm-4 col-md-3"> Div 5</div>
<div class="col-sm-4 col-md-3"> Div 6</div>
<div class="col-sm-4 col-md-3"> Div 7</div>
<div class="col-sm-4 col-md-3"> Div 8</div>
<div class="col-sm-4 col-md-3"> Div 9</div>
<div class="col-sm-4 col-md-3"> Div 10</div>
</div>
https://codeply.com/p/g7ewLO9nbJ
裝訂gy-*線用于增加或減少列之間的垂直間距。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/324535.html
標籤：html css 推特引导 bootstrap-5
下一篇：go中的包排序影響所有切片