html - 为什么我的 div 元素没有在我的屏幕上隔开？

问题描述

所以我正在使用引导程序并尝试在我的图像下方创建一个页脚。我希望一个元素占据 3 列，一个元素占据 6 列，另一个元素占据 3 列，但它们似乎都被挤压到左侧，几乎没有任何边距。为什么会这样？如果我将其中一个列更改为高于 12 的任何值，则一个或多个将转到下一行，所以我不明白为什么它们都被挤到左侧。

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/pipboy.app.css" />

</head>

...


<navbar class="navbar navbar-expand-lg navbar-light">
            <div class="row">
                <div class="col-3">
                    HP 90/90
                </div>
                <div class="col-6">
                    LEVEL 1
                    <div class="level-progress"></div>
                </div>
                <div class="col-3">
                    AP 50/50
                </div>
            </div>
</navbar>

神秘风格表

.center-image img{

    margin: auto;
    display: block;
    position: relative;
    max-height: 300px;
    margin-top: 100px;
    filter:grayscale(1)sepia(100%)hue-rotate(55deg)saturate(7)brightness(1)contrast(2);
}

标签： htmlcssbootstrap-4

html - 为什么我的 div 元素没有在我的屏幕上隔开？

问题描述

解决方案

推荐阅读