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

这些| 符号是伪分隔符，在其中我已用作列的定界符。 这三列应基于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; */
}

Answer 2

您只需要使用col （ https://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns ）

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" > <footer class="footer"> <div class="container-fluid"> <div class="row"> <div class="col"> <p>2018 © Hello World!</p> </div> <div class="col"> <div class="text-md-right"> <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"> <div> <select> <option>1</option> <option>2</option> </select> </div> </div> </div> </div> </footer> 

Answer 3

引导网格系统开箱即用，共有12列，因此除非您进行更改，否则它将为12列。

从引导文档 ：

列类表示每行可能使用的12列中的列数。 因此，如果要跨三个相等宽度的列，则可以使用.col-4。

由于12 / 3 = 4

---

但是从Bootstrap 4开始，您无需显式声明列宽。 它将根据您拥有的列数来计算列的宽度

因此，您最终将得到如下内容（来自Boostrap文档 ）：

<div class="row">
  <div class="col">
      One of three columns
  </div>
  <div class="col">
      One of three columns
  </div>
  <div class="col">
      One of three columns
  </div>
</div>

它应该看起来像这样：

另外，我不会定义不必要的CSS规则。

Answer 4

您的代码中的问题是“ col-md”类仅在容器宽度大于“ md”断点的768时适用。 如果您在默认布局中看到小提琴，则将屏幕划分为四个区域，预览一区域的宽度小于768像素，因此您将div叠放了...此外，如上所述，在其他答案中，您应该在类上使用“ -4”而不是“ -6”，因为Bootstrap网格系统基于12列布局。

因此，将“ col-md-6”类更改为“ col-sm-4”，您将获得所需的内容。 （此处“ col-sm-”代表小屏幕断点）