html - 无法在 Bootstrap 中对齐元素

Question

我不是一名优秀的开发人员，因为我只是一名学生。我正在尝试为我创建一个网站，但我无法在 bootstrap 中对齐我的行上的元素。我正在尝试这样做: 1但我坚持这一点:

<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col">
      <div class="title">
        Lorem Ipsum —<br>Interactive Media<br>Designer
      </div>
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      <ul class="link">
        <li>About</li>
        <li>Work</li>
        <li>Experiments</li>
        <li>Contact</li>
        <li>Instagram</li>
        <li>Behance</li>
      </ul>
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      <div class="footer">
        All rights reserved© 1998—2019
      </div>
    </div>
  </div>
</div>

有人可以帮助我吗？这些元素只是没有像我希望的那样对齐

Answer 1

为此，您需要将每个元素放在单个 row 中。你有 3 行。

想象一下这样的行

---

---

---

每一行代表一行。如果您将内容放在一个 row 元素中，它将以单行显示。如果您放入更多行，内容将显示在更多行中。

所以你的代码应该是这样的

<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col">
      <div class="title">
        Lorem Ipsum —<br>Interactive Media<br>Designer
      </div>
    </div>
    <div class="col">
      <ul class="link">
        <li>About</li>
        <li>Work</li>
        <li>Experiments</li>
        <li>Contact</li>
        <li>Instagram</li>
        <li>Behance</li>
      </ul>
    </div>
    <div class="col">
      <div class="footer">
        All rights reserved© 1998—2019
      </div>
    </div>
  </div>
</div>

如果这没有帮助，那么我没有正确理解您的意思，所以请回到这里，我们可以解决它:)

更新

根据新信息我得到这应该是新的解决方案

<div class="container-fluid top">
  <div class="row align-items-start">
    <div class="col">
      <div class="title">
        Lorem Ipsum —<br>Interactive Media<br>Designer
      </div>
    </div>
  </div>
</div>
<div class="container-fluid center">
  <div class="row align-items-center">
    <div class="col">
      <ul class="link">
        <li>About</li>
        <li>Work</li>
        <li>Experiments</li>
        <li>Contact</li>
        <li>Instagram</li>
        <li>Behance</li>
      </ul>
    </div>
  </div>
</div>
<div class="container-fluid bottom">
  <div class="row align-items-end">
    <div class="col">
      <div class="footer">
        All rights reserved© 1998—2019
      </div>
    </div>
  </div>
</div>

.top {
  position: aboslute;
  top: 0;
}

.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bottom {
  position: absolute;
  bottom: 0;
}