我有一個(gè)網(wǎng)格系統(tǒng)，我在網(wǎng)格列中添加了一個(gè)表格。但是該表格沒(méi)有覆蓋該列的整個(gè)寬度。它在左側(cè)和右側(cè)都顯示了空間。是否是因?yàn)榫W(wǎng)格列的默認(rèn)填充而發(fā)生這種情況？
3 回答
天涯盡頭無(wú)女友
TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超9個(gè)贊
請(qǐng)首先提供您的代碼。
你可以no-gutters選擇： Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.
https://getbootstrap.com/docs/4.0/layout/grid/
<div class="row no-gutters">
<div class="col-md-2">
// stuff here for this column
</div>
<div class="col-md-10">
// stuff here for columns
</div>
</div>
或者：您必須查看哪個(gè)屬性（可能是 col）添加了空格（邊距或填充）
我在之前的項(xiàng)目中添加了這個(gè)以減少所有列的空間
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto
{ padding: 3px !important; }
根據(jù)您的需要進(jìn)行調(diào)整
茅侃侃
TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超22個(gè)贊
如果您scss使用Bootstrap V4 ，您可以width使用更改裝訂線variable。
$grid-gutter-width: 2rem !default;
如果你想改變column某些部分的填充。您應(yīng)該添加自定義類并這樣做。
超文本標(biāo)記語(yǔ)言
<div class="row custom-row">
<div class="col-12 col-md-4"></div>
<div class="col-12 col-md-4"></div>
<div class="col-12 col-md-4"></div>
</div>
CSS
.custom-row{
margin-left: -10px;
margin-right: -10px;
}
.custom-row .col-12{
padding-left: 10px;
padding-right: 10px;
}
/* Wild card with class */
.custom-row [class~=col]{
padding-left: 10px;
padding-right: 10px;
}
.custom-row [class*='col-']{
padding-left: 10px;
padding-right: 10px;
}
/* Wild card with global */
[class*='col-']{
padding-left: 10px;
padding-right: 10px;
}
慕婉清6462132
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個(gè)贊
您只需將 .g-0 添加到列即可刪除列之間的默認(rèn)裝訂線。
<div class="col g-0">
<h1>Heading</h1>
<p>Lorem ipsum</p>
</div>
https://getbootstrap.com/docs/5.0/layout/gutters/#no-gutters
- 3 回答
- 0 關(guān)注
- 155 瀏覽
添加回答
舉報(bào)
0/150
提交
取消