Question

我使用bootstrap创建了以下布局： demo

正如您所看到的那样，如果您想了解更多关于......的信息。 div由四个小div重叠。你能给我任何建议来解决这个问题吗？帮助将不胜感激。

Answer 1

如果需要换行

，请使用班级行

name="customer[]"

Answer 2

检查此代码..

.more-info > div > div:nth-child(3) {
    color: #8b8b8b;
    font-family: calibrilight;
    font-size: 18px;
    padding: 0 139px;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin-bottom: -42px;
}

您添加了“margin-bottom：-42px”。删除并再次检查。如果你想拥有那部分只包括“padding-bottom：42px”。所以空间保持不变。

Answer 3

直接在<div class="col-lg-12 col-md-12">课程后删除row

您不需要col-lg，因为它等于col-md您只能使用col-md

修改代码

<div class="container-fluid">
<div class="row more-info">

      <div class="col-md-12">
          <img src="img/info-icon.png">
      </div>

      <div class="col-md-12>">
          MORE INFO
      </div>

      <div class="col-md-12">
          If you would like to know more about rules and regulations around fgas testing then please click the more info page or read the posts below.
      </div>

      <div class="col-md-3 info-box">
        <div class="col-md-12">
          <div class="col-md-12">
              What do the Regulations seek to achieve?
          </div>
          <div class="col-md-12">
              Fluorinated gases have a high global warming effect if released into the atmosphere. The principal objective of the EC Regulation is to contain, prevent and thereby...
          </div>
        </div>
        <div class="col-md-12">
              <a href="#">READ MORE</a>
        </div>
      </div>

      <div class="col-md-3 info-box">
        <div class="col-md-12">
          <div class="col-md-12">
              Why is a mandatory certification scheme required?
          </div>
          <div class="col-md-12">
              Fluorinated gases have a high global warming effect if released into the atmosphere. The principal objective of the EC Regulation is to contain, prevent and thereby...
          </div>
        </div>
        <div class="col-md-12">
            <a href="#">READ MORE</a>
        </div>
      </div>

      <div class="col-md-3 info-box">
        <div class="col-md-12">
          <div class="col-md-12">
              When do I need to apply?
          </div>
          <div class="col-md-12">
              Fluorinated gases have a high global warming effect if released into the atmosphere. The principal objective of the EC Regulation is to contain, prevent and thereby...
          </div>
        </div>
        <div class="col-md-12">
            <a href="#">READ MORE</a>
        </div>
      </div>

      <div class="col-md-3 info-box">
        <div class="col-md-12">
            <div class="col-md-12">
                How will it affect my business?
            </div>
            <div class="col-md-12">
                Fluorinated gases have a high global warming effect if released into the atmosphere. The principal objective of the EC Regulation is to contain, prevent and thereby...
            </div>
        </div>
        <div class="col-md-12">
            <a href="#">READ MORE</a>
        </div>
      </div>

      <div class="col-md-12">
          <a href="#">More info page</a>
      </div>

</div>
</div>

一些bootstrap div与其他bootstrap div重叠

3 个答案: