使用引导程序的流体背景的双列页脚

Question

我尝试使用bootstrap网格系统构建具有流畅背景的双列页脚，请参阅下面的示例。这些列中的内容不应该是流动的。它也应该响应并堆叠在小型设备上。

这可能吗？

这是我现在所做的，但正如我所说，内容不应该是流动的，我该如何实现？

＆＃13;

＆＃13;

.footer .row {
  height: 100px;
  color: white;
}

.left {
  background-color: #222;
}

.right {
  background-color: #333
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-5 left">
        Left
      </div>
      <div class="col-md-7 right">
        Right
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Link to pen

Example Image

Answer 1

HTML：

<footer>
    <div class="container-fluid">
        <div class="row">
            <div class="footer-col-rt col-md-6">
                ....
            </div>
            <div class="footer-col-lf col-md-6">
                ...
            </div>
        </div>
    </div>
</footer>

CSS：

footer .footer-col-rt {
   background-color: #233140;
}
footer .footer-col-lf {
   background-color: #2C3E50;
}