我目前正在使用一个.psd模板并使用Bootstrap 4.我有一个部分的问题，其中包含多个行和不同内容的列。主要问题是一列，文本内部标题包含两行。如何将其他块内的其他单行标题置于与此相关的其他块中？
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>
答案 0 :(得分：1)
首先，从第一个block移除<div class="col-md-3">，使它们全部顶对齐。
其次，由于h4无法看到对方（不是兄弟姐妹），您需要给它们一个固定的高度（您可以使用不同屏幕尺寸的媒体查询进行调整）或使用脚本。
以下是使用固定高度的示例，其中我添加了此规则：
.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解决方案。
Stack snippet
.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>