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

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列。

From the bootstrap documentation：

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

自12 / 3 = 4

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

所以您最终会得到这样的结果（来自Boostrap documentation）：

<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-”代表小屏幕断点）

Bootstrap列不会彼此相邻显示

4 个答案: