Question

我的jumbotron有2小时的线路。第一个按照我想要的在页面开头正确对齐。徽标底部的那个应位于页面的末尾。我设定了一个高达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>

Answer 1

除了你在jumbotron中编码<hr>标签之外，你的代码中的每一件事情都没问题，只需在jumbotron之前和之后添加hr标签，然后你就会得到预期的结果

＆＃13;

 <!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">
	<style>
	.jumbotron{
height: 100vh;}
	</style>
</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 -->
       <hr style="background: white; justify-content-start"/>
<section id="home" class="hero-bg jumbotron">
    <div class="container pt-0 pb-5 header-h">
        <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 -->

    </div>

    <!-- container -->
</section>
           <hr class="align-self-end" style="background: white;"/> 
<!-- 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>

＆＃13;

最后的jumbotron中的hr行

1 个答案: