Question

我无法在Bootstrap 4网格系统中设置HTML5结构，看起来像附加图像。如果设备（手机，平板或平板电脑处于纵向模式），它需要看起来像顶部图像，如果它们处于横向模式，它需要看起来像底部。

<footer><!-- Code is too long to post, so see jsfiddle --></footer>

Answer 1

您可以像在HTML页面上的任何其他位置一样在页脚内部使用div。你可以制作行，使用柱状系统，甚至（虽然我不建议这样做）理论上在那里放置了500万个三维表。页脚只是一个特别命名的div。

Answer 2

我相信我按照你想要的方式工作，检查jsfiddle：

https://jsfiddle.net/o6uf9hq4/

<footer class="footer__wrapper">
  <div class="container-fluid">
    <div class="row">

        <div class="col-sm-12 col-md-6">
          <h5 class="footer__contact-us-header footer__text--underline">
                  CONTACT OUR <br>
                  EXCLUSIVE AGENTS AT
                </h5>
          <div class="footer__line footer__line--pl10"></div>
          <h3 class="footer__contact-us-number">‎646-846-0954</h3>
        </div>

        <div class="footer__name-wrapper col-sm-6 col-md-2">
          <h3 class="footer__name footer__text--underline">BRAD COHEN</h3>
          <div class="footer__line"></div>
          <p class="footer__name-title">
            Senior Director<br>
            <a href="mailto:bc@ecretail.com" class="footer__name-link">
              bc@ecretail.com
            </a>
          </p>
        </div>

        <div class="footer__name-wrapper col-sm-6 col-md-2">
          <h3 class="footer__name footer__text--underline">JACOB TZFANYA</h3>
          <div class="footer__line"></div>
          <p class="footer__name-title">Senior Director<br>
            <a href="mailto:jt@ecretail.com" class="footer__name-link">
              jt@ecretail.com
            </a>
          </p>
        </div>

        <div class="footer__name-wrapper col-sm-6 col-md-2">
          <h3 class="footer__name footer__text--underline">JON KAMALI</h3>
          <div class="footer__line"></div>
          <p class="footer__name-title">Director<br>
            <a href="mailto:jk@ecretail.com" class="footer__name-link">
              jk@ecretail.com
            </a>
          </p>
        </div>
      </div>

      <div class="row justify-content-end">

        <div class="col-sm-6 col-md-3">
          <div class="footer__sponsor-logo-wrapper">
            <img class="footer__sponsor-logo" src="img/terreno-logo.png" alt="#">
          </div>
        </div>

        <div class="col-sm-6 col-md-3">
          <div class="footer__address-wrapper">
            <img src="img/ec-logo-footer.svg" alt="" class="footer__logo">
            <p class="footer__ec-contact">
              355 Lexington Avenue,<br>
              New York, NY 10017<br>
              easternconsolidated.com<br>
              T: 212.499.7700; <br>
              F: 212.499.7718
            </p>
          </div>
        </div>

      </div>
    </div>
</footer>
<html>

以下是使用从Bootstrap documentation中提取的网格系统的一些指南：

容器提供了一种中心和水平填充网站内容的方法。使用.container表示响应像素宽度，或.container-fluid表示宽度：所有视口和设备尺寸均为100％。
行是列的包装器。每列都有水平填充（称为装订线），用于控制它们之间的空间。然后在具有负边距的行上抵消该填充。这样，列中的所有内容都在左侧可视化对齐。
在网格布局中，内容必须放在列中，只有列可以是行的直接子项。
感谢flexbox，没有指定宽度的网格列将自动布局为等宽列。例如，.col-sm的四个实例将自动从小断点向上自动增加25％。有关更多示例，请参阅自动布局列部分。
列类表示您希望在每行可能使用的12列中使用的列数。因此，如果您想要三个相等宽度的列，则可以使用.col-4。
列宽以百分比形式设置，因此它们总是相对于其父元素具有流动性和大小。
列具有水平填充以在各列之间创建装订线，但是，您可以从.row中移除带有.no-gutters的列中的边距和填充。
要使网格响应，有五个网格断点，每个响应断点一个：所有断点（超小），小，中，大和超大。
网格断点基于最小宽度的媒体查询，这意味着它们适用于那个断点以及它上面的所有断点（例如，.col-sm-4适用于小型，中型，大型和超大型设备，但不适用于第一个xs断点）
您可以使用预定义的网格类（如.col-4）或Sass mixins进行更多语义标记。

如何设置页脚的Bootstrap结构

2 个答案: