Question

我想将元素包装在带有阴影和圆角边框的矩形内，我还希望它们具有相同的高度和响应能力（这就是为什么我不直接设置max height或height等））

这是我想要实现的：

这就是我到目前为止所拥有的：

这是我的代码：

<div class="row">
        <div class="col-12">
            <h2 class="sm-header-title mb-5">Nuestros viajes de esquí organizados</h2>
        </div>
        <div class="col-3 rectangle-holder p-5">
            <h2 class="sm-header-title">Viajes escolares</h2>
        </div>
        <div class="col-3 rectangle-holder p-5">
            <h2 class="sm-header-title">Viajes universitarios</h2>
        </div>
        <div class="col-3 rectangle-holder p-5">
            <h2 class="sm-header-title">Viajes para empresas</h2>
        </div>
        <div class="col-3 rectangle-holder p-5">
            <h2 class="sm-header-title">Otros tipo de grupos</h2>
        </div>
    </div>

和CSS：

.sm-header-title {
  font-size: 30px;
  font-weight: 800;
  color: #3490dc;
}

.rectangle-holder {
  border-radius: 10px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.3);
  background-color: white;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<style>
.sm-header-title {
  font-size: 30px;
  font-weight: 800;
  color: #3490dc;
}

.rectangle-holder {
  border-radius: 10px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.3);
  background-color: white;
}
</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="sm-header-title mb-5">Nuestros viajes de esquí organizados</h2>
      </div>
      <div class="col-3 rectangle-holder p-5">
        <h2 class="sm-header-title">Viajes escolares</h2>
      </div>
      <div class="col-3 rectangle-holder p-5">
        <h2 class="sm-header-title">Viajes universitarios</h2>
      </div>
      <div class="col-3 rectangle-holder p-5">
        <h2 class="sm-header-title">Viajes para empresas</h2>
      </div>
      <div class="col-3 rectangle-holder p-5">
        <h2 class="sm-header-title">Otros tipo de grupos</h2>
      </div>
    </div>
  </div>
</body>
</html>

Answer 1

将h2和div类中的所有h-100与您添加到div列中的其他类一起包装。

.sm-header-title {
  font-size: 30px;
  font-weight: 800;
  color: #3490dc;
}

.rectangle-holder {
  border-radius: 10px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.3);
  background-color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row ">
    <div class="col-12">
        <h2 class="sm-header-title mb-5">Nuestros viajes de esquí organizados</h2>
    </div>
    <div class="col-3">
      <div class="rectangle-holder   p-5 h-100">
          <h2 class="sm-header-title">Viajes escolares</h2>
      </div>
    </div>
    <div class="col-3">
      <div class="rectangle-holder   p-5 h-100">
          <h2 class="sm-header-title">Viajes universitarios</h2>
      </div>
    </div>
    <div class="col-3">
      <div class="rectangle-holder   p-5 h-100">
          <h2 class="sm-header-title">Viajes para empresas</h2>
      </div>
    </div>
    <div class="col-3">
      <div class="rectangle-holder   p-5 h-100">
          <h2 class="sm-header-title">Otros tipo de grupos</h2>
      </div>
    </div>
</div>

Answer 2

尝试此解决方案...如果这不是您的解决方案，请添加问题的简要信息。

.sm-header-title {
    font-size: 30px;
    font-weight: 800;
    color: #3490dc;
  }

  .rectangle-holder {
    border-radius: 10px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.3);
    background-color: white;
    display: block;
    height: 200px;
    width: 100%;
  }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class="sm-header-title mb-5">Nuestros viajes de esquí organizados</h2>
    </div>
    <div class="col-md-3">
      <div class="rectangle-holder p-5">
        <h2 class="sm-header-title">Viajes escolares</h2>
      </div>
    </div>
    <div class="col-md-3">
      <div class="rectangle-holder p-5">
        <h2 class="sm-header-title">Viajes universitarios</h2>
      </div>
    </div>
    <div class="col-md-3">
      <div class="rectangle-holder p-5">
        <h2 class="sm-header-title">Viajes para empresas</h2>
      </div>
    </div>
    <div class="col-md-3">
      <div class="rectangle-holder p-5">
        <h2 class="sm-header-title">Otros tipo de grupos</h2>
      </div>
    </div>
  </div>
</div>

如何使所有列之间的高度和边距相同？

2 个答案: