Question

我想在导航下面有一条白线，然后开始拍摄部分（如图所示）。它们应该在标题中，而不是在导航中。因此，当我滚动它时，它不会锁定在顶部。

我正在使用Bootstrap 4。

我遇到的最大问题是如何正确设置间距。或者我需要让线条拥有div？什么是最好的方式？

    <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">Impression</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">
    <div class="container py-5">
        <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 class="align-items-center row justify-content-center">
                <button type="button" class="btn btn-light">zu meinen Dienstleistungen</button>
            </div>
    </div>
    <!-- container -->
</section>

    .line {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;

Answer 1

为了便于控制间距，您只需使用<hr>元素，如下面的代码段所示。

例如，<hr class="mb-4" style="background: white;">将margin-bottom设置为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 bg-info 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">Impression</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 bg-info">
    <div class="container py-5">
        <hr class="mb-4" style="background: white;">
        <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="https://placehold.it/240x120" alt="Rollywood-Logo" >
            </div>


            <!-- col -->
        </div>
        <!-- row -->
        <div class="align-items-center row justify-content-center">
            <button type="button" class="btn btn-light">zu meinen Dienstleistungen</button>
        </div>
        <hr class="my-3" style="background: white;">
    </div>
    <!-- container -->
</section>

此外，hr元素可以通过多种方式轻松设置样式。

以下是一些想法：https://css-tricks.com/examples/hrs/

标题行顶部和底部

1 个答案: