Question

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

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>

CUSTOM 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行内容出现在导航栏上

1 个答案: