Question

我不是一名优秀的开发人员，因为我只是一名学生。我正在尝试为我创建一个网站，但是我无法在引导程序中对齐行中的项目。我正在尝试这样做： 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;
}

Answer 2

align-items属性取决于高度行。为此，您可以设置行的高度

在Bootstrap中无法对齐项目

2 个答案: