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

Question

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

Answer 1

这是因为.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>

Answer 2

如果您确实想要使用col-课程，请务必将.thumbnail元素width设置为100%，并在no-padding上使用col-课程{1}}元素。

以下是一个例子：

＆＃13;

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您实际上根本不需要使用col-类，也不需要浮点数。另一种方法是使用display: inline-block。

以下是它的外观：

＆＃13;

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果你真的很勇敢，你也可以使用CSS Grid布局。 ;）

  

CSS Grid Layout

     

CSS网格布局擅长将页面划分为主要区域，或者在从HTML基元构建的控件的各个部分之间定义大小，位置和图层之间的关系。

以下是这样的：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

删除padding-left个类的padding-right和.col，然后将width: 100px;更改为width: 100%; <{1}}

＆＃13;

＆＃13;

.row > div > div

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

Row具有自己的样式并为元素添加边距，您可以通过添加：

来删除它

.box >.row{
  margin:0;
}