html - 具有不同大小内容的相等 flexbox 网格 + 分隔符

Question

我目前正在处理一个 .psd 模板并使用 Bootstrap 4。我有一个部分有问题，其中包含具有不同内容的多行和多列。主要问题是一列，标题内的文本换行成两行。我如何才能将与此相关的其他 block 内的其他单行标题居中？

Image of the section from mockup

另一个问题是关于分隔线的。将它们作为模型插入哪个选项更好？通过使用之前/之后？

谢谢。

.benefites {
  background: #0b3b52;
}

.benefites .headline {
  color: #fff;
  padding: 30px 0;
  font-weight: 100;
  text-transform: uppercase;
}

.benefites h4,
.benefites h2 {
  color: #92d050;
}

.benefites p {
  color: #fff;
}

.benefites .block {
  align-self: center;
}

.benefites img {margin: 10px 0;}

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

<section class="benefites">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2 class="headline">Managing your team has never been easier!
        </h2>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-3 block">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage team roster and member profiles easily with our amazing tool</p>
      </div>
      <div class="col-md-3">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Save time and energy! Manage all your teams in one easy-to-use platform </p>
      </div>
      <div class="col-md-3">
        <h4>Practises & Games</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p> Figuring out the “when and where” has never been easier. Schedule your games, practices, quickly and easily!</p>
      </div>
      <div class="col-md-3">
        <h4>Injuries & Medical records</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Collect all the data about your player’s condition and medical records</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Sponsors & Agents</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage all the sponsor and agent information with us </p>
      </div>
      <div class="col-md-3">
        <h4>Contacts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>A full contact database that makes you easy to search, filter, and update</p>
      </div>
      <div class="col-md-3">
        <h4>Contracts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Get full visibility and handle all the contracts online with CRM42</p>
      </div>
      <div class="col-md-3">
        <h4>Reports</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Our wide range of reports help you to take your management skills to a next level</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Treatments</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Simply the best tool for managing all kind of team payments</p>
      </div>
      <div class="col-md-6 block">
        <h2>
          And many more amazing features ...
        </h2>
      </div>
      <div class="col-md-3 ">
        <h4>Customized platfrom</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Make the most out of your management tool. Create your own design quickly and easily.</p>
      </div>
    </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" </script>
  < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
</script>

Answer 1

首先，删除block从第一个<div class="col-md-3">所以他们都顶部对齐。

其次，作为h4看不到彼此(不是 sibling )，您需要给他们一个固定的高度(您可以使用媒体查询针对不同的屏幕尺寸进行调整)或使用脚本。

这是一个使用固定高度的示例，我在其中添加了这条规则:

.benefites h4 {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

这是我的另一个答案，how to get header from cards or similar to have the same height with flex box? ，它有一个脚本版本，还链接到我制作的另一个 CSS 解决方案。

堆栈片段

.benefites {
  background: #0b3b52;
}

.benefites .headline {
  color: #fff;
  padding: 30px 0;
  font-weight: 100;
  text-transform: uppercase;
}

.benefites h4,
.benefites h2 {
  color: #92d050;
}

.benefites h4 {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefites p {
  color: #fff;
}

.benefites .block {
  align-self: center;
}

.benefites img {margin: 10px 0;}

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

<section class="benefites">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2 class="headline">Managing your team has never been easier!
        </h2>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-3">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage team roster and member profiles easily with our amazing tool</p>
      </div>
      <div class="col-md-3">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Save time and energy! Manage all your teams in one easy-to-use platform </p>
      </div>
      <div class="col-md-3">
        <h4>Practises & Games</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p> Figuring out the “when and where” has never been easier. Schedule your games, practices, quickly and easily!</p>
      </div>
      <div class="col-md-3">
        <h4>Injuries & Medical records</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Collect all the data about your player’s condition and medical records</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Sponsors & Agents</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage all the sponsor and agent information with us </p>
      </div>
      <div class="col-md-3">
        <h4>Contacts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>A full contact database that makes you easy to search, filter, and update</p>
      </div>
      <div class="col-md-3">
        <h4>Contracts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Get full visibility and handle all the contracts online with CRM42</p>
      </div>
      <div class="col-md-3">
        <h4>Reports</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Our wide range of reports help you to take your management skills to a next level</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Treatments</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Simply the best tool for managing all kind of team payments</p>
      </div>
      <div class="col-md-6 block">
        <h2>
          And many more amazing features ...
        </h2>
      </div>
      <div class="col-md-3 ">
        <h4>Customized platfrom</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Make the most out of your management tool. Create your own design quickly and easily.</p>
      </div>
    </div>
  </div>
</section>