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;
}

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

这是一个小提琴。

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

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

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

标签： htmlcssbootstrap-4

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; */
}