具有不同大小内容+分隔符的相等弹性箱网格

时间:2018-02-02 18:23:01

标签: html css twitter-bootstrap css3 flexbox

我目前正在使用一个.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>

1 个答案:

答案 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>