bootstrap 4 行内容出现在导航栏上

Question

我是 bootstrap 的新手，我刚刚使此页面的结构几乎与 bootstrap 网站中的入门模板完全相同，但行内容出现在导航栏上。即使我在 row 元素上使用了 align-items-center bootstrap 实用程序 class。

here is an image

HTML

<body class="bg-dark -bg-pic -fill-viewport">

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-transparent">
    <div class="container">
        <a class="navbar-brand" href="#">####</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link -link-active px-0 mx-2" href="#">Page principale</a>
            </li>
            <li class="nav-item">
                <a class="nav-link -link px-0 mx-2" href="#">Ajouter une annonce</a>
            </li>
            </ul>
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Se connecter</button>
        </div>
    </div>
</nav>

<main role="main" class="container">
    <div class="row">
        <div class="col-md-2 col-lg-3"></div>
        <div class="col-12 col-md-8 col-lg-6 text-center">
            <h1 class="text-white">Hello</h1>
            <p class="lead -text-white-70">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Vestibulum sed ipsum ac turpis vestibulum aliquet.
                    Morbi ac neque quis justo posuere tincidunt in id arcus.</p>
            <form class="" action="#">
                <div class="input-group">
                    <input class="form-control" placeholder="Rechercher" name="search" type="text">
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-2 col-lg-3"></div>
    </div>
</main>

自定义 CSS

/* Utility classes*/
.-fill-viewport {
    min-height: 100vh;
}

.-text-white-70 {
    color: rgba(255,255,255,0.7);
}

/* Medium devices and higher */
@media only screen and (min-width: 768px) {
    .-link-active {
        border-style: solid;
        border-color: white;
        border-width: 0px 0px 3px 0px;        
    }

    .-link:hover {
        border-style: solid;
        border-color: rgba(211,211,211,0.6);
        border-width: 0px 0px 3px 0px;

    }
}

/* small devices and higher */
@media only screen and (min-width: 576px) {
    .-bg-pic {
        background: linear-gradient(
                    rgba(20,20,20, .6), 
                    rgba(20,20,20, .6)),
                    url("background.jpeg") center/cover no-repeat;
    }
}

Answer 1

那是因为您使用 fixed-top 作为导航栏。

添加 mt-5 并在需要时添加 pt-5 到主容器，这样就可以了。

<main role="main" class="container mt-5 pt-5">

mt-* 表示 "margin-top"，pt-* 表示 "padding-top"。

bootstrap 4 行内容出现在导航栏上

bootstrap 4 row content appearing over the navbar

html

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4