引導程序中項目之間的空間

Question

我正在使用bootstrap 4 ，我有一個我顯示的項目列表，如下所示：

<div class="container">

  <div class="row">
    <div class="card col-md-4 col-sm-6 col-12 item-wr"  *ngFor="let item of items">
        ...
    </div>
  </div> 

</div>

在我使用 Google Chrome 的桌面視圖中，我可以逐行看到 3 個項目，但問題是列之間沒有空格。 所以我添加了一個類item-wr

.item-wr {
    margin: 10px; 
}

但這里也換行了，我只看到 2 個項目，在行的右側有一些空間。

那么我怎樣才能讓每行col-md-4 3 個項目之間col-md-4空間呢？

PS我希望每一行的開頭或結尾都沒有空格。 每行的第一列不能有一些margin-left ，每行的最后一列不能有一些margin-right

Answer 1

您必須在col-md-4 col-sm-4 col-12內提供card類。 因為col-md-4 col-sm-4 col-12這個類自己填充並提供空間，所以你可以在列類中應用與設計相關的類。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> </div> </div>

Answer 2

使用 bootstrap 4 提供的填充實用程序類，如pr-2用於填充 2 個間距單位。 參考這里

PS 邊距會在盒子模型之外增加空間，因此您應該使用填充來防止換行。 有關更多信息，請參閱此處