html - 在 Bootstrap 5.0 中使用 d-flex 时宽度不正确

问题描述

我有一个 base.html 文件，在我的 Django 项目中用作模板。我使用 d-flex 创建顶部导航和侧边栏，但我正在努力将每个网站的宽度和高度设置为 100%。

当它作为静态页面运行时，一切正常，但是当我尝试在 Django 中运行它时，结果是这样的：

如您所见，宽度和高度不是 100%，但它们正在以某种方式适应内容。

我怎样才能解决这个问题？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Starlab - {% block title %}{% endblock %}</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="d-flex w-100" id="wrapper">
        <!-- Sidebar-->
        <div class="border-end bg-white text-center" id="sidebar-wrapper" style="width: 275px;">
            <div class="sidebar-heading border-bottom bg-light text-center" style="height: 55px;"></div>
            <div class="list-group list-group-flush">
                <a class="list-group-item list-group-item-action list-group-item-light p-3"
                    href="{% url 'homepage' %}">Home pge</a>
                <a class="list-group-item list-group-item-action list-group-item-light p-3" href="/products">Products</a>
                <a class="list-group-item list-group-item-action list-group-item-light p-3" href="/articles">Articles</a>
            </div>

            <div class="list-group-item p-3">Categories
                <ul>
                    {% for tag in tags %}
                    <div class="text-center"><a href={% url 'tagged' tag.slug %}>{{tag.name}}</a></div>
                    {% empty %}
                    <li></li>
                    {% endfor %}
                    </li>
                </ul>
            </div>
        </div>
        <!-- Page content wrapper-->
        <div id="page-content-wrapper">
            <!-- Top navigation-->
            <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
                <div class="container">
                    <button class="btn btn-outline-secondary" id="sidebarToggle"><i class="fas fa-bars"></i></button>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation"><span
                            class="navbar-toggler-icon"></span></button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mx-auto">
                            <div class="input-group d-flex" style="width: 30vw;">
                                <input type="text" class="form-control" placeholder="Search">
                                <div class="input-group-append">
                                    <button class="btn btn-secondary" type="button">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>

                        </ul>
                    </div>
                </div>
            </nav>
            <!-- Page content-->
            <div class="container">
                <h1 class="p-3">{% block header %}{% endblock %}</h1>
                <div class="px-4">{% block content %}{% endblock %}</div>
            </div>
        </div>
    </div>
</body>

</html>

标签： htmlcssdjangobootstrap-5

html - 在 Bootstrap 5.0 中使用 d-flex 时宽度不正确

问题描述

解决方案

推荐阅读