html - Bootstrap 列不会彼此相邻显示

Question

我正在使用 Bootstrap 4 并且 Footer 部分有一些问题，我想创建三个具有相同宽度的列，使用类 col- md-6 如文档中所述，这是我的代码:

<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <p>2018 © Hello World!</p>
      </div>
      <div class="col-md-6">
        <div class="text-md-right footer-links d-none d-md-block">
          <a href="javascript: void(0);">About</a>
          <a href="javascript: void(0);">Support</a>
          <a href="javascript: void(0);">Contact Us</a>
        </div>
      </div>
      <div class="col-md-6">
        <div>
          <select>
            <option>1</option>
            <option>2</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</footer>

这是应用于样式化页脚的 CSS:

.footer {
    border-top: 1px solid rgba(152,166,173,.2);
    bottom: 0;
    padding: 19px 30px 20px;
    position: absolute;
    right: 0;
    color: #98a6ad;
    left: 250px;
}

结果完全不正确，我应该让内容与包含该元素的列的中心完美对齐，但我得到的所有元素都是:

这是一个fiddle .

预期的结果应该是这样的:

| 2018© Hello World! | About Support Contact Us | 1

这些 | 符号是假的分隔符，我在其中用作列的分隔符。这三列应根据 windows 分辨率放大。

Answer 1

由于网格规则遵循 - 12 列系统，因此应以总计为 12 的方式使用网格。

<footer class="footer">
<div class="container-fluid">
<div class="row">
  <div class="col-xs-4">
    <p>2018 © Hello World!</p>
  </div>
  <div class="col-xs-4">
    <div class="footer-links d-none d-md-block">
      <a href="javascript: void(0);">About</a>
      <a href="javascript: void(0);">Support</a>
      <a href="javascript: void(0);">Contact Us</a>
    </div>
  </div>
  <div class="col-xs-4">
    <div>
      <select>
        <option>1</option>
        <option>2</option>
      </select>
    </div>
  </div>
</div>

CSS

.footer {
border-top: 1px solid rgba(152,166,173,.2);
bottom: 0;
padding: 19px 30px 20px;
position: absolute;
right: 0;
color: #98a6ad;
/* left: 250px; */
}