个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我的超大屏幕上有 2 小时的线路。第一个在页面开头按照我的意愿正确对齐。 Logo 底部的那个应该在页面的末尾。我将 vh 高度设置为 100。
.jumbotron{
height: 100vh;
如何在最后对齐 hr？我尝试了类似 align-items-end 的方法，但这没有成功。
我正在使用 Bootstrap 4，html 如下所示:
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Wichtige Meta Daten -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS
============================================================================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Custom -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
<a href="#texting" class="nav-link">Texting</a>
</li>
<li class="nav-item">
<a href="#eventkonzeption" class="nav-link">Event Konzeption</a>
</li>
<li class="nav-item">
<a href="#impression" class="nav-link">Impressionen</a>
</li>
<li class="nav-item">
<a href="#ueber" class="nav-link">Über mich</a>
</li>
<li class="nav-item">
<a href="#kontakt" class="nav-link">Kontakt</a>
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg jumbotron">
<div class="container pt-0 pb-5 header-h">
<hr style="background: white; justify-content-start">
<div class="align-items-start row justify-content-center">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
<hr class="align-self-end" style="background: white;">
</div>
<!-- container -->
</section>
<!-- Header -->
<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="assets/js/custom.js"></script>
</body>
</html>
最佳答案
要解决这个问题(同时将 <hr> 元素保留在超大屏幕内)，添加类 d-flex flex-column h-100到超大屏幕内的容器，然后添加 mt-auto类 (margin-top:auto) 和可选的 mb-0 class (margin-bottom:0) 到最后<hr>元素。
d-flex flex-column类启用 flexbox 列和 h-100给它 100% 的高度。 mt-auto在 <hr> 上然后将其向下推。通过 pb-*容器上的类，然后您可以控制 <hr> 距底部多远坐。在这种情况下，我选择了 pb-4 .
点击下面的“运行代码片段”并展开到整页进行测试:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
<a href="#texting" class="nav-link">Texting</a>
</li>
<li class="nav-item">
<a href="#eventkonzeption" class="nav-link">Event Konzeption</a>
</li>
<li class="nav-item">
<a href="#impression" class="nav-link">Impressionen</a>
</li>
<li class="nav-item">
<a href="#ueber" class="nav-link">Über mich</a>
</li>
<li class="nav-item">
<a href="#kontakt" class="nav-link">Kontakt</a>
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg jumbotron bg-info pb-0" style="height: 100vh;">
<div class="container d-flex flex-column h-100 pt-0 pb-4 header-h">
<hr style="background: white; height: 1px; width: 100%; border: 0">
<div class="align-items-start row justify-content-center mx-auto">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="https://placehold.it/500x100" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
<hr class="mt-auto mb-0" style="background: white; height: 1px; width: 100%; border: 0">
</div>
<!-- container -->
</section>
<!-- Header -->注意:我还添加了 mx-auto到 Logo 图像 div 以使其水平居中。
关于html - 最后在超大屏幕中的 hr 行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48981800/
25
4
0
这个问题在这里已经有了答案: “return” and “try-catch-finally” block evaluation in scala (2 个回答) 7年前关闭。 为什么method1返
我有一个动态列表，需要选择最后一项之前的项目。 drag your favorites here var lastLiId = $(".album
我想为每个线程执行特定操作，因此，我认为tearDown Thread Group 不起作用。 是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”？ 谢谢。 最佳答案
在我的书中它使用了这样的东西: for($ARGV[0]) { Expression && do { print "..."; last; }; ... } for 循环不完整吗？另外，do 的意义何
我想为每个线程执行特定操作，因此，我认为tearDown Thread Group 不起作用。 是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”？ 谢谢。 最佳答案
有没有可能 finally 不会被调用但应用程序仍在运行？ 我在那里释放信号量 finally { _semParallelUpdates.Re
我收藏了 对齐的元素，以便它们形成两列。使用 nth-last-child 的组合和 nth-child(even) - 或任何其他选择器 - 是否可以将样式应用于以下两者之一:a)最后两个(假设
我正在阅读 Jon Skeet 的 C# in Depth . 在第 156 页，他有一个示例， list 5.13“使用多个委托(delegate)捕获多个变量实例化”。 List list = n
我在 AM4:AM1000 范围内有一个数据列表(从上到下有间隙)，它总是被添加到其中，我想在其中查找和总结最后 4 个结果。但我只想找到与单独列相对应的结果，范围 AL4:AL1000 等于单元格
我最近编写了一个运行良好的 PowerShell 脚本 - 然而，我现在想升级该脚本并添加一些错误检查/处理 - 但我似乎被第一个障碍难住了。为什么下面的代码不起作用？ try { Remove-
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
使用 Django 中这样的模型，如何检索 30 天的条目并计算当天添加的条目数。 class Entry(models.Model): ... entered = models.Da
我有以下代码。 public static void main(String[] args) { // TODO Auto-generated method stub
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
这个问题已经有答案了: Multiple returns: Which one sets the final return value? (7 个回答) 已关闭 8 年前。 我正在经历几个在工作面试中
$ cat n2.txt apn,date 3704-156,11/04/2019 3704-156,11/22/2019 5515-004,10/23/2019 3732-231,10/07/201
我可以在 C/C++ 中设置/禁用普通数组最后几个元素的读(或写)访问权限吗？由于我无法使用其他进程的内存，我怀疑这是可能的，但如何实现呢？我用谷歌搜索但找不到。 如果可以，怎样做？ 因为我想尝试这样
我想使用在这里找到的虚拟键盘组件 http://www.codeproject.com/KB/miscctrl/touchscreenkeyboard.aspx就像 Windows 中的屏幕键盘 (O
我正在运行一个 while 循环来获取每个对话的最新消息，但是我收到了错误 [18-Feb-2012 21:14:59] PHP Warning: mysql_fetch_array(): supp
这个问题在这里已经有了答案: How to get the last day of the month? (44 个答案) 关闭 8 年前。 这是我在这里的第一篇文章，所以如果我做错了请告诉我...
我是一名优秀的程序员,十分优秀！