gpt4 book ai didi

html - Bootstrap 更改 $grid-gutter-width

转载 作者:行者123 更新时间:2023-12-04 16:34:35 25 4
gpt4 key购买 nike

我正在使用 Bootstraps 网格系统,每列之间需要一个 2px 空间。我试过 Column-Gap 但没有。

有人能帮忙吗?

HTML 代码:

<div class="container">
<div class="row">
<div class="col-md-3" id="one">
<h3>Pink</h3>

</div>
<div class="col-md-3" id="two">
<h3>Purple</h3>
</div>
<div class="col-md-3" id="three">
<h3>Green</h3>
</div>
<div class="col-md-3" id="four">
<h3>Orange</h3>
</div>
</div>
<div class="row2">
<div class="col-md-3" >
<h3>Things that are Pink</h3>
<p>Pigs</p>
<p>Barbie</p>
<p>Some Skins</p>
<p>Ham</p>
</div>
<div class="col-md-3" >
<h3>Things that are Purple</h3>
<p>Prince</p>
<p>Goths</p>
<p>Paint</p>
<p>Berries</p>
</div>
<div class="col-md-3" >
<h3>Things that are Green</h3>
<p>Grass</p>
<p>Peas</p>
<p>Leafs</p>
<p>Apple</p>
</div>
<div class="col-md-3" >
<h3>Things that are Orange</h3>
<p>Orange</p>
<p>Ice-Lolly</p>
<p>Essex</p>
<p>Carrots</p>
</div>
</div>
</div>
</body>
</html>

代码:CSS

body {
font-family: 'Roboto Mono', monospace;

}

@media screen and (min-width: 768px)
.jumbotron {
padding-top: 48px;
padding-bottom: 48px;
}

.jumbotron {
text-align: center;
}

.container {
text-align: center;
}

#one {
border: 5px solid pink;
border-radius: 20px;
background-color: pink;
color: white;
}

#two {
border: 5px solid purple;
border-radius: 20px;
background-color: purple;
color: white;
}

#three {
border: 5px solid green;
border-radius: 20px;
background-color: green;
color: white;
}

#four {
border: 5px solid orange;
border-radius: 20px;
background-color: orange;
color: white;
}

.row2 {
margin-top: 30px;
margin-right: -15px;
margin-left: -15px;
}

最佳答案

调整 Bootstrap 间距宽度的快速指南

调整 Bootstrap 的装订线大小

更改 Bootstrap 默认间距大小的简单方法。

HTML

<div class="gutter-2 row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>

`

CSS

.gutter-2.row {
margin-right: -1px;
margin-left: -1px;
}
.gutter-2 > [class^="col-"], .gutter-2 > [class^=" col-"] {
padding-right: 1px;
padding-left: 1px;
}`

关于html - Bootstrap 更改 $grid-gutter-width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44652337/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com