Question

我遇到了间距问题。这是代码：

＆＃13;

.border {
  border: 1px solid red;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-4 border">
    <p>.......</p>
  </div>
  <div class="col-md-4 border">
    <p>.......</p>
  </div>
  <div class="col-md-4 border">
    <p>.......</p>
  </div>
</div>

＆＃13;

没有边框，它看起来像。但是添加边框，它们会相互接触。看起来很难看。添加保证金 - 左和右没有帮助。最后一列将被转储到下一行。用负填充补偿余量也不起作用。

我没有选择。在列之间添加一些空格需要做什么？

Answer 1

将规则应用于列内的内容，而不是列本身/

.border {
    border: 1px solid red;
}

<div class="col-md-4">
    <div class="border">Content>/div>
</div>

示例：

＆＃13;

body {
  padding-top: 60px;
}
.border {
  border: 1px solid red;
  padding: 10px;
  background-color: aliceblue;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p class="border">Hello</p>
    </div>
    <div class="col-md-4">
      <p class="border">Hello</p>
    </div>
    <div class="col-md-4">
      <p class="border">Hello</p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

只需删除除最后一个元素之外的所有元素的右边框，例如

.border:not(:last-child) {
  border-right: none;
}

Demo

Bootstrap在列之间添加空格

2 个答案: