html - 添加文本引导时的列扩展
问题描述
运行以下 HTML 代码时，我注意到一个问题：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<style>
.card
{
background-color: #EFF3FC!important;
}
.btnBlue
{
background: #1467ba;
height: 25px;
width: 70px;
font-size: 14px;
color: white;
}
</style>
<body>
<div class="container-fluid d-flex flex-column min-vh-100 justify-content-center align-items-center text-center">
<div class="row no-gutters">
<div class="col-md-4">
<div class="card card-block w-100 h-100">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EFF3FC;">
</nav>
<p class="h3 text-primary">
Sign In
<br>
<br>
</p>
<form action="{% url 'landing' %}" method="POST">
<input type="email" id="Username" name="username" placeholder="Username">
<br> <br>
<input type="password" id="Password" name="password" placeholder="Password">
<br> <br>
<h6>
<p class="text-danger">
<small> The Username or Password you entered does not match our records. Please try again. </small>
<br>
</p>
</h6>
<button type="submit" class="btn btn-primary align-center btn-sm">Log In</button>
</form>
<br> <br> <br> <br> <br>
</div>
</div>
<div class="col-md-8">
<div class="card card-block w-100 h-100">
<p class="h3 text-primary">
<br> <br>
Sign Up
<br>
<br>
</p>
<p>
Don't have an account yet? Enter your username and we'll send you a link for a secure sign-up experience!
<br>
<br>
</p>
<div class="form-group">
<input type="email" id="Email" name="Email" placeholder="Email">
<br>
</div>
<h6>
<p class="text-danger" hidden>
<small> Please check the email you've entered and try again! </small>
<br>
</p>
</h6>
<div class="form-group">
<button type="submit" class="btn btn-primary align-center btn-sm">Submit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
每当我添加文本时，列（md-4 和 md-8）都会展开/压缩。例如，尝试删除行<small> The Username or Password you entered does not match our records. Please try again. </small> . 左边的容器会突然变小。重新添加该行，容器将展开。我该如何解决这个问题？理想情况下，无论添加/删除那条线，我都不希望宽度发生变化。
解决方案
问题出在你的第一个 div 那里我改变了我喜欢这个试试这个
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<style>
.card
{
background-color: #EFF3FC!important;
}
.btnBlue
{
background: #1467ba;
height: 25px;
width: 70px;
font-size: 14px;
color: white;
}
</style>
<body>
<div class="container-fluid d-block text-center" style="position: absolute;top
:50%;transform: translateY(-50%);">
<div class="row no-gutters ">
<div class="col-md-4 ">
<div class="card card-block w-100 h-100">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EFF3FC;">
</nav>
<p class="h3 text-primary">
Sign In
<br>
<br>
</p>
<form action="{% url 'landing' %}" method="POST">
<input type="email" id="Username" name="username" placeholder="Username">
<br> <br>
<input type="password" id="Password" name="password" placeholder="Password">
<br> <br>
<h6>
<!-- <p class="text-danger">
<small> The Username or Password you entered does not match our records. Please try again. </small>
<br>
</p> -->
</h6>
<button type="submit" class="btn btn-primary align-center btn-sm">Log In</button>
</form>
<br> <br> <br> <br> <br>
</div>
</div>
<div class="col-md-8">
<div class="card card-block w-100 h-100">
<p class="h3 text-primary">
<br> <br>
Sign Up
<br>
<br>
</p>
<!-- <p>
Don't have an account yet? Enter your username and we'll send you a link for a secure sign-up experience!
<br>
<br>
</p> -->
<div class="form-group">
<input type="email" id="Email" name="Email" placeholder="Email">
<br>
</div>
<h6>
<p class="text-danger" hidden>
<small> Please check the email you've entered and try again! </small>
<br>
</p>
</h6>
<div class="form-group">
<button type="submit" class="btn btn-primary align-center btn-sm">Submit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- javascript - 判断一个节点是否包含ap标签的简单方法
- c++ - 通过 apache 箭头读取 csv 的官方示例的 Coredump？
- autodesk-forge - 使用特定设置从 Forge 中的 revit 文件导出 ifc 文件
- python - 登录 Python/Django 未按预期工作
- html - 具有列过滤但宽度与没有相同的数据表
- javascript - Node.js + express如何将字符串添加到请求url？
- excel - 如何将表格的特定部分从工作表复制到另一个工作表
- python - 如何在公共列表中列出每个循环中的输出值？
- c# - Asp.NET 核心项目因 NETSDK1061 失败：项目已使用 Microsoft.NETCore.App 版本恢复
- python - 如何根据指定值对列进行分组并进一步对另一列进行分组并对它们进行计数（Pandas Python）