CSS - 完全删除列之间的间距？答案

【问题标题】：CSS - completely remove spacing between columns?CSS - 完全删除列之间的间距？
【发布时间】：2017-07-03 04:10:24
【问题描述】：

我有这个 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）。

我能够删除行之间的边距，但不能删除列之间的边距。有没有办法以某种方式强制它？我需要所有“正方形”彼此相邻，没有任何边距（行和列之间）。

你可以在这里看到它的样子：https://jsfiddle.net/a91zujkj/

【问题讨论】：

标签： html css twitter-bootstrap-3 margin

【解决方案1】：

如果您真的想使用col- 类，请确保将.thumbnail 元素width 设置为100% 并在no-padding 元素上使用no-padding 类。

这是一个例子：

@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。

看起来是这样的：

@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 网格布局。 ;)

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>

【讨论】：

【解决方案2】：

这是因为.col-*-4 比100px 宽，这是您为.thumbnail 元素定义的宽度。

您可以删除 .col-* 类并改用 .pull-left。

.box {
    width: 300px;
    padding-top: 100px;
}
.row > div > div {
    width: 100px;
    height: 100px;
    margin: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="box center-block">
        <div class="row">
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

删除.col 类的padding-left 和padding-right，然后将.row > div > div 的width: 100px; 更改为width: 100%;

.box {
    width: 300px;
    padding-top: 100px;
}
.padding-0{
    padding-right:0 !important;
    padding-left:0 !important;
}
.row > div > div {
    width: 100%;
    height: 100px;
    margin: 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="box center-block">
        <div class="row">
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案4】：

行有自己的样式并为元素添加边距，您可以通过添加来删除它：

.box >.row{
  margin:0;
}

【讨论】：