在 Bootstrap 4 网格中添加列间距

Question

我有以下代码

<% include partials/header %>

<div class="container">

    <header class="jumbotron">
        <div class="container">
            <h1>Welcome to YelpCamp!</h1>

            <p>View our handpicked campgrounds from all over the world!</p>

            <p><a class="btn btn-primary btn-large" href="/campgrounds/new">Add New Campsite</a></p>
        </div>
    </header>

    <div class="row text-center" >
        <% campgrounds.forEach(function(campground){ %>
            <div class="col-lg-3 col-md-4 col-xs-6 img-thumbnail p-0 ">
                <img class="img-fluid" src="<%= campground.image %>">
                <caption> <%= campground.name %> </caption>
            </div>
        <% }) %>
    </div>

<a href="/">Back</a>
</div>


<% include partials/footer %>

我正在读取露营地列表并将它们添加到 Bootstrap 网格中。但是，元素之间没有间距。在 Bootstrap 3 中，使用缩略图时这些间隙是自动的（在 4 中不可用）。例如，如果我向

添加边距 mx-3

`class="col-lg-3 col-md-4 col-xs-6 img-thumbnail"`

这会添加到总宽度中，以免移位。如何在列之间添加间距？

Answer 1

Bootstrap 4也可以给你自动间距。假设您根据需要使用正确的组件。

您的案例中正确的组件是 figure 组件。将 classes figure-img img-thumbnail 应用于图像。

对于图片说明，您应该使用这些（而不是您尝试使用的）：

<figcaption class="figure-caption">Your Image Caption</figcaption>

行上的 justify-content-center class 如果您的缩略图数量不均匀，或者您决定将 col-md-4 添加到列中，则缩略图将居中显示。

点击下面的"run code snippet"展开整页进行测试：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
   <header class="jumbotron pl-5">
       <h1>Welcome to YelpCamp!</h1>
       <p>View our handpicked campgrounds from all over the world!</p>
       <p><a class="btn btn-primary btn-large" href="/campgrounds/new">Add New Campsite</a></p>
   </header>

   <div class="row justify-content-center text-center">
       <div class="col-6 col-lg-3">
           <figure class="figure">
               <img src="https://placeimg.com/800/400/animals" class="figure-img img-thumbnail">
               <figcaption class="figure-caption">A caption for the above image.</figcaption>
           </figure>
       </div>
       <div class="col-6 col-lg-3">
           <figure class="figure">
               <img src="https://placeimg.com/800/400/people" class="figure-img img-thumbnail">
               <figcaption class="figure-caption">A caption for the above image.</figcaption>
           </figure>
       </div>
       <div class="col-6 col-lg-3">
           <figure class="figure">
               <img src="https://placeimg.com/800/400/tech" class="figure-img img-thumbnail">
               <figcaption class="figure-caption">A caption for the above image.</figcaption>
           </figure>
       </div>
       <div class="col-6 col-lg-3">
           <figure class="figure">
               <img src="https://placeimg.com/800/400/arch" class="figure-img img-thumbnail">
               <figcaption class="figure-caption">A caption for the above image.</figcaption>
           </figure>
       </div>
   </div>
</div>

此外：您应该避免嵌套 Bootstrap 容器，除非绝对必要 这几乎从来不是这种情况。

在 Bootstrap 4 网格中添加列间距

Add spacing between columns in Bootstrap 4 grid

css

thumbnails

bootstrap-4