html - Bootstrap 布局页脚与其他元素发生碰撞

Question

好的，我正在使用 bootstrap + Rails 构建布局。

如果我上传较大的图片，页脚不会与包含内容信息的文本框冲突，但与我使用的图片有问题。

如何使用我喜欢的元素(图片)并确保页脚永远不会与文本框发生冲突？

View 看起来像这样

`<h1>Contact#index</h1>
<p>Find me in app/views/contact/index.html.erb</p>

<div class="container">
  <div class="content-overlap">
    <h2>Contact Us</h2>
      <p> For investment information call: <br>
        +phonenumberhere237 or +phonenumberhere8 <br> <br>
          For legal contact:+phonenumberhere0 <br>
           For partnership: phonenumberhere7142 <br>
                  </p>
  </div>
  <div class="image-overlap">
    <img src="assets\administration.jpg"  >
  </div>
</div>`

使用 bootstrap 和 rails 5.1.4(但事实证明代码来自 codepen 而不是 bootstrap 所以忽略 fork 代码在这里 https://codepen.io/Anthematics/pen/RMwZJG)

页脚本身在我的布局文件夹中呈现为部分 - 这个问题在一些地方仍然存在，但它的元素最少，一旦在这里解决，我相信我可以在其他地方解决。

在 HTML 中，我的页脚看起来像这样 <p class = "footie"> Victoria University 2018 </p>

在 CSS 中

.footie {
  &:before {
    display: block;
    content: " ";
    clear: both;
  }
}

.footie {
  background: black;
  color: wheat;
}

Answer 1

在需要的地方使用 clearfix？ https://v4-alpha.getbootstrap.com/utilities/clearfix/

或者你可以试试:

footer {
  &:before {
    display: block;
    content: " ";
    clear: both;
  }
}

获取您的代码:

<div class="container">
  <div class="content-overlap">...</div>
  <div class="image-overlap">...</div>
</div>
<div style='display: block; clear: both;'></div>