[英]Bootstrap change $grid-gutter-width
I am using Bootstraps grid system and I need about a 2px
space between each column . 我正在使用Bootstraps网格系统, 每列之间大约需要2px
空间 。 I've tried Column-Gap but nothing. 我已经尝试过Column-Gap,但是什么也没有。
Could anyone help? 有人可以帮忙吗?
Code HTML: 代码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>
Code: CSS 代码: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;
}
to change the gutter
you have two way: 改变gutter
有两种方法:
@grid-gutter-width
in variables.less:327
, but then you will need to compile the generated css yourself. 在variables.less:327
更改@grid-gutter-width
,但是您将需要自己编译生成的CSS。 @grid-gutter-width
and download a new custom build at Bootstrap#Customize 更改@grid-gutter-width
并在Bootstrap#Customize下载新的自定义版本 Note that the customize section will be dropped in twitter bootstrap 4
. 请注意,定制部分将被放置在twitter bootstrap 4
。
A quick guide to resizing Bootstrap's gutter width 调整Bootstrap装订线宽度的快速指南
Resizing Bootstrap's Gutter 调整引导槽的大小
A simple method of changing Bootstrap's default gutter size. 更改Bootstrap的默认装订线大小的简单方法。
HTML 的HTML
<div class="gutter-2 row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
` `
CSS 的CSS
.gutter-2.row {
margin-right: -1px;
margin-left: -1px;
}
.gutter-2 > [class^="col-"], .gutter-2 > [class^=" col-"] {
padding-right: 1px;
padding-left: 1px;
}`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.