使用 Bootstrap 4 构建的登陆页面答案

【问题标题】：Landing Page Built with Bootstrap 4使用 Bootstrap 4 构建的登陆页面
【发布时间】：2018-05-06 23:11:09
【问题描述】：

我已经为我构建了一个着陆页，它的布局相当简单。但问题是横幅照片淹没了页面，我必须滚动才能看到完整的页面。是否可以对 HTML 和/或 CSS 进行调整以将横幅照片的高度降低约三分之一？

【问题讨论】：

我们需要在这里查看一些代码来帮助您。
对不起，我认为 Bootstrap 是一个标准框架，因此任何知道它的人都会知道解决方案。假设当然有一个。我不知道要粘贴哪一段代码。
Bootstrap 是一个非常流行的框架，但我们不知道您的确切设置。您可以创建一个标头的代码 sn-p，这会很有帮助。
@Carl Bootstrap 是一个标准框架，但是当有人在 Bootstrap 中设计某些东西时，他们可以手动覆盖 CSS - 它并不能涵盖所有内容。
好的，谢谢山姆。我无法附加文件，并且没有足够的空间粘贴所有代码。我得看看能不能从谷歌上拿下来。再次感谢。

【解决方案1】：

有很多不同的方法可以做到这一点。我只会给你看一个，它应该完全适合你当前的页面和需求。

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 d-flex align-items-end overflow-hidden banner-image-container">
    <img class="img-responsive" src="img/top-banner.jpg" width="100%">
</div>

（在您的<style 标签内：）

.overflow-hidden {
    overflow: hidden;
}

.banner-image-container {
    max-height: 400px;
}

我所做的是将图像周围的容器限制为 400 像素的最大高度。因为你的图像比那个大，我在容器中添加了overflow: hidden;，所以它会切断图像的其余部分。现在您在图像中的主要焦点将是我猜的建筑物。所以我确实用d-flex align-items-end 将它一直移到了顶部。

【讨论】：

一流的保罗。非常感谢你。赞赏。
完全没问题，很高兴它有帮助。如果这是您问题的“正确答案”，您可以在我的答案旁边标上绿色复选标记。