Question

我们的网站使用 bootstrap 4.x

目前是：

如何在这些元素之间添加间距？

以下是 Bootstrap 的完整代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="banner-slider-top banner-slider-cat">
  <div class="row">
    <div class="d-none d-xl-block col-lg-3 bn-menu">menu</div>
    <div class="col-12 col-xl-9">
      <div class="row no-gutters bn-inner">
        <div class="col-12 col-sm-12 col-md-7">
          <div class="item-bn-slider-05 slider-2 lazyload">
            <div class="owl-carousel owl-theme">
              <div class="item-slider">
                <div class="img-slide">slider</div>
                <div class="block-center">
                  <p class="text-small animated fadeInDownSlide"><span style="color: #3078a6;">LIMITED EDITION</span></p>
                  <h2 class="text-large animated fadeInDownSlide delay-0s5">Baby Hipseat<br>Carrier<br>Waist Stool</h2>
                  <div class="text-normal animated fadeInDownSlide delay-1s">
                    <div>Discount</div>
                    <p>40% Off</p>
                  </div>
                  <div class="btn-wrap animated fadeInDownSlide delay-1s5"><a class="btn-shopnow action primary" href="#"><span>Shop now</span></a></div>
                </div>
              </div>
            </div>
          </div>
          <script type="text/javascript" xml="space">
            // <![CDATA[
            require(['jquery', 'owlWidget'], function($) {
              $(function() {
                $('.item-bn-slider-05').owlWidget({
                  autoplay: true,
                  items: 1,
                  autoplayTimeout: 8000,
                  dots: true,
                  nav: true,
                  loop: true,
                  margin: 0
                });
              });
            });
            // ]]>
          </script>
        </div>
        <div class="col-12 col-sm-12 col-md-5">
          <div class="row no-gutters">
            <div class="col-6 col-sm-6">
              <div class="item-bn-inner">image1</div>
            </div>
            <div class="col-6 col-sm-6">
              <div class="item-bn-inner">image2</div>
            </div>
            <div class="col-12 col-sm-12">
              <div class="item-bn-inner">image3</div>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-12">
          <div class="row no-gutters">
            <div class="col-12 col-sm-12 col-md-7">
              <div class="item-bn-inner">image4</div>
            </div>
            <div class="col-12 col-sm-12 col-md-5">
              <div class="row no-gutters">
                <div class="col-6 col-sm-6">
                  <div class="item-bn-inner">image5</div>
                </div>
                <div class="col-6 col-sm-6">
                  <div class="item-bn-inner">image6</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我想要类似的效果：有人可以帮助我怎么做吗？我将不胜感激任何提示。我搜索了论坛，但不幸的是我在这里没有看到任何类似的解决方案。再次感谢大家的帮助。

Answer 1

所以你应该在主容器中添加一个 padding：

.banner-slider-cat .bn-inner{
  padding:0 10px 10px 0;
}

padding 仅在 right 和 bottom 上，因为您将在 margin 和 left 上的项目上有 top：< /p>

.item-bn-inner, .slider-2 {
  margin-left: 10px;
  margin-top: 10px;
}

您必须将“Combo 5x newborn...”容器的大小调整为 182px：

.item-bn-inner .item-bn{
  height: 182px;
}

Answer 2

你应该为元素添加边距，你可以做边距右、边距顶部等。边距会在你放置的元素（类）之间创造额外的空间。

margin-top: 10px; 
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin: 10px;

就你而言：

.item-bn-inner{margin:10px}

引导元素之间的间距 4

2 个答案: