时间戳

首页 > 解决方案 > 在移动设备大小时如何在 jumbotron 之间添加空间

html - 在移动设备大小时如何在 jumbotron 之间添加空间

问题描述

所以我正在建立这个网站，它在 pc 网络大小中看起来像这样：

当我调整窗口大小以使其成为移动大小的窗口（电话）时，jumbotrons 变成这样：

在此处输入图像描述

我的问题是，当它是移动尺寸时，有没有一种方法可以在 jumbotrons 之间添加一个空格？我不希望大屏幕像我上面附上的图片那样粘在一起。

到目前为止我的代码，html：

<div class="container col-12">
    <div class="row">
        <div class="col-md-6">
        <div class="jumbotron jumbotron-fluid" id="bg-card-1">
            <h1>Cardholder #1</h1>
            <p>Unique. Outstanding.</p>
        </div>
        </div>
        
        <div class="col-md-6">
        <div class="jumbotron jumbotron-fluid" id="bg-card-2">
            <h1>Cardholder #2</h1>
            <p>Stunning. Modern.</p>
        </div>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-6">
        <div class="jumbotron jumbotron-fluid" id="bg-card-3">
            <h1>Product</h1>
            <p>Description</p>
        </div>
        </div>
        <div class="col-md-6">
        <div class="jumbotron jumbotron-fluid" id="bg-card-4">
            <h1>Product</h1>
            <p>Description</p>
        </div>
        </div>
    </div>
</div>

和css文件：

#bg-card-1 {
  background: url("https://i.postimg.cc/0y2F6Gpp/3.jpg") no-repeat center center;
  background-size: cover;
  color:white;
  text-align: center;
  height: 100%;
}   

#bg-card-2 { 
  background: url("https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg") no-repeat center;
  background-size: cover;
  color:white;
  text-align: center;
  height: 100%;
}

#bg-card-3 { 
  background: url("https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg") no-repeat center;
  background-size: cover;
  color:white;
  text-align: center;
  height: 100%;
}

#bg-card-4 { 
  background: url("https://i.postimg.cc/0y2F6Gpp/3.jpg") no-repeat center;
  background-size: cover;
  color:white;
  text-align: center;
  height: 100%;
}

标签： htmlcssbootstrap-4

解决方案

在 Bootstrap 4 中，您可以根据断点 (xs sm md lg xl) 设置边距和填充。

要根据屏幕大小设置不同的边距，您可以为元素边距类赋予不同的断点和不同的边距值。像这样：

<div class="jumbotron jumbotron-fluid my-3 my-lg-0" id="bg-card-3">
    <h1>Product</h1>
    <p>Description</p>
</div>

在此示例中，jumbotron 在大小屏幕上将具有y 轴边距（顶部和底部） ，但3在尺寸为或xs sm md的屏幕上没有 y 轴边距。lgxl

请注意，要xs在 Bootstrap 中指定断点，您根本不需要在类中添加任何断点。

您可以在下面的链接中阅读有关引导程序中的间距和断点的更多信息。

https://getbootstrap.com/docs/4.0/utilities/spacing/

https://getbootstrap.com/docs/4.0/layout/overview/

推荐阅读