CSS-完全删除列之间的间距? [英] CSS - completely remove spacing between columns?
问题描述
我有这个HTML:
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
和CSS:
.box {
width: 300px;
padding-top: 100px;
}
.row > div > div {
width: 100px;
height: 100px;
margin: 0px;
}
我也在使用bootsrap(版本3).
I'm also using bootsrap (version 3).
我能够删除行之间的边距,但无法删除列之间的边距.有办法强迫它吗?我需要所有相邻的正方形"且没有任何边距(行和列之间).
I was able to remove margin between rows, but can't remove margin between columns. Is there a way to force it somehow? I need all "squares" next to each other without any margins (both between rows and columns).
您可以在这里看到它的外观: https://jsfiddle.net/a91zujkj/ >
You can see how it looks here: https://jsfiddle.net/a91zujkj/
推荐答案
如果你真的想使用 col-
类,请确保设置 .thumbnail
元素 <将code> width 设置为 100%
,并在 col-
元素上使用 no-padding
类.
If you really want to use col-
class, make sure to set the .thumbnail
elements width
to 100%
and use a no-padding
class on the col-
elements.
这里是一个例子:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.box {
width: 300px;
padding-top: 100px;
}
.no-padding {
padding-left: 0;
padding-right: 0;
}
.thumbnail {
width: 100%;
height: 100px;
margin: 0;
}
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
实际上,您根本不需要使用 col-
类,并且也不需要浮点数.另一种方法是使用 display: inline-block
.
You actually do not need to use col-
classes at all and floats are not needed either. Another way to do this is using display: inline-block
.
这是它的外观:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.wrapper {
width: 300px;
padding-top: 100px;
margin: 0 auto;
font-size: 0;
}
.item {
border: 1px solid #eee;
width: 100px;
height: 100px;
display: inline-block;
font-size: initial;
}
<div class="wrapper">
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
</div>
如果您真的很勇敢,也可以使用CSS Grid布局.;)
And if you're really brave you could also use CSS Grid layout. ;)
CSS网格布局擅长将页面划分为主要区域,或根据HTML原语构建的控件各部分之间在大小,位置和层方面定义关系.
这是怎么回事:
.wrapper {
padding-top: 100px;
width: 300px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
}
.item {
border: 1px solid #ddd;
height: 100px;
width: 100px;
}
<div class="wrapper">
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
</div>
这篇关于CSS-完全删除列之间的间距?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!