在Bootstrap 4网格中的列之间添加间距

问题描述

我有以下代码

<％包括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中不可用).例如，如果我向

I'm reading from a campgrounds list and adding them to a Bootstrap grid.However, the elements have no spacing between them. In Bootstrap 3 those gaps were automatic when using thumbnail (not available in 4).If I add a margin mx-3, for example, to

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

将其添加到总宽度中，以免移位.如何在列之间添加间距?

this is added to the total width and the lest item is displaced.How can I add spacing between columns?

推荐答案

Bootstrap 4还可为您提供自动间距.假设您使用适合您需要的组件.

Bootstrap 4 can also give you automatic spacing. Assuming you use the right components for your needs.

您认为合适的组件是 figure 组件.将 figure-img img-thumbnail 类应用于图像.

The right component in your case would be the figure component. With the classes figure-img img-thumbnail applied to the images.

对于图像标题，您应该使用这些标题(而不是您尝试使用的标题):

And for image captions, you should use these (instead of what you tried to use):

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

如果您碰巧缩略图的数量不均匀或决定添加 col-md-4 ，则该行上的 justify-content-center 类将使缩略图居中.code>到列.

The justify-content-center class on the row will center the thumbnails if you happen to have an uneven number of them or if you decide to add col-md-4 to the columns.

点击下面的运行代码段"，然后展开到整页进行测试:

Click "run code snippet" below and expand to full page for testing:

<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容器，几乎从来没有.

Also: You should avoid nesting Bootstrap containers unless absolutely necessary which is almost never the case.

这篇关于在Bootstrap 4网格中的列之间添加间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！