时间戳

首页 > 解决方案 > 如何在 bootstrap rounded d-flex 中使用 max-width

html - 如何在 bootstrap rounded d-flex 中使用 max-width

问题描述

我正在尝试使用这样的引导程序实现登录页面：

在此处输入图像描述

但是由于某种原因，我想用来放置徽标的 div 不能是全宽的。

JSFIDDLE 在线演示

在此处输入图像描述

显然 w-100 不能正常工作。

我怎样才能使这个 div 全宽？：

<div style="background-color:#193D4C;" class="w-100">
    <h3 class="text-light">Sign In</h3>
</div>

标签： htmlcsstwitter-bootstrapbootstrap-5

解决方案

所以在 JSFidle 中就是这一行，在 Body 标签之后的第 4 行。

<div class="col-md-4 col-sm-12 shadow-lg p-5 bg-light">

p-5 正在向主框添加填充 x5。您可以完全删除 p-5 以完全没有填充。然后你的标题应该延伸到边缘。

但是，您可能希望在其他内部元素（例如表单）上放置边距或填充。这是因为移除 p-5 也可能会将这些元素推到盒子的边缘。

这是来自 JSFiddle 的完整信息。我已删除 p-5 填充并将 p-3 填充添加到登录标题和表单。希望这有效:)

<body>
        <div class="container-fluid vh-100" style="margin-top:300px">
            <div class="" style="margin-top:200px">
                <div class="rounded d-flex justify-content-center">
                    <div class="col-md-4 col-sm-12 shadow-lg bg-light">
                        <div style="background-color:#193D4C;" class="w-100 p-3">
                            <h3 class="text-light">Sign In</h3>
                        </div>
                        <form action="" class="p-3">
                            <div class="p-4">
                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-primary"><i
                                            class="bi bi-person-plus-fill text-white"></i></span>
                                    <input type="text" class="form-control" placeholder="Username">
                                </div>
                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-primary"><i
                                            class="bi bi-key-fill text-white"></i></span>
                                    <input type="password" class="form-control" placeholder="password">
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Remember Me
                                    </label>
                                </div>
                                <button class="btn btn-primary text-center mt-2" type="submit">
                                    Login
                                </button>
                                <p class="text-center mt-5">Don't have an account?
                                    <span class="text-primary">Sign Up</span>
                                </p>
                                <p class="text-center text-primary">Forgot your password?</p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>
    ````

推荐阅读