Question

我想在我的列之间留出一些空间，但是在为它们添加边框后我没有得到它。我该怎么做？

<div class="row">
  <div class="col-md-4" style= "border:1px solid black">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4" style= "border:1px solid black">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4" style= "border:1px solid black">
          <p>Stuff that fills this column</p>
     </div>
</div>

Answer 1

您需要margin-left：

.col-md-4:not(:first) {
    margin-left: 5px;
}

编辑：

要将项display作为列，您需要以下附加规则：

.row .col-md-4 {
  display: inline-block;
}

请参阅this小提琴。

Answer 2

你需要使用selector do css class change first div tag。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>
.col-md-4:not(:first-child) {
   margin-left: 5px;
   background-color: red;
}
.col-md-4 {
   margin-left: 0px;
   border: 1px solid #cdcdcd;
   width:calc(33.3333333% - 5px) !important;
}

</style
<div class="row">
  <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
</div>

Answer 3

不应使用col-*-4，而应使用col-*-3，因为它不会跨越整个宽度。另外我添加了以下CSS：

.col-xs-3:not(:first-child) {
    margin-left: 12%;
}

这是工作的小提琴：https://jsfiddle.net/6jyye76e/5/

3列之间的空格与bootstrap中的边框

3 个答案: