Bootstrap 布局页脚与其他元素冲突

Question

好的，所以我正在 bootstrap + Rails 中构建布局。

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

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

视图看起来像这样

`<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 所以忽略分支代码在这里 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>

Bootstrap 布局页脚与其他元素冲突

Bootstrap layout footer colliding with other elements

html

css

ruby-on-rails

bootstrap-sass