时间戳

首页 > 解决方案 > Boostrap 4 行修复水平溢出

html - Boostrap 4 行修复水平溢出

问题描述

我有这个问题，当我在页面右侧排成一行时，会出现一个空白。我想知道为什么会发生这种情况以及如何删除它。我尝试了多种方法，但没有任何成功。

.special-header {
  margin-top: 50px;
}

.special-h1 {
  font-size: 40px;
  font-weight: 700;
  font-style: normal;
  color: #6BC8F2;
  line-height: 49px;
}

.special-row {
  margin-top: 120px;
}

.special-h2 {
  text-align: center;
}

.special-block {
  border: 2px solid #6BC8F2;
  margin-left: 160px;
  margin-right: 160px;
  border-radius: 5px;
  padding: 30px;
}

.special-icon {
  float: right;
}

.special-i {
  font-size: 39px;
  color: #6BC8F2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<article class="special-header">
  <div class="text-center container">
    <h1 class="special-h1">Onze specialiteiten</h1>
  </div>
  <div class="special-row row d-flex justify-content-center">
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Maatwerk</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">Meer…&lt;/a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Maatwerk</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">Meer…&lt;/a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Maatwerk</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">Meer…&lt;/a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
  </div>
</article>

截屏 下面我发布了我的 HTML 和 css 以及它的外观图片！

标签： htmlcssbootstrap-4

解决方案

用带有容器或容器流体类的 div 包装你的第一行

推荐阅读