图像容器在引导程序中炸毁整个页面
[英]Image container blows up to whole page in bootstrap
提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。
问题描述
我显然做错了什么，但这是我使用 Bootstrap 的第 2 天。 我有一个两排的液体容器。 在第一行我有一个标题和一张图片。 该图像 - 即使我降低了高度并将其设置为响应式，也会导致第一行中的第二列基本上扩展到几乎整个页面。 当我删除图像时，世界就有意义了。 当我放回图像时，容器爆炸了。 发生在任何图像上，所以它不是图像，这是我的错误引导程序。
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col">
<img src="masterchef.png" class="img-responsive h-25" alt="">
</div>
</div>
<div class="row">
<div class="col">
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>`
尝试使用缩略图 class，尝试查看 Bootstrap 文档，尝试重新排序以查看是否有帮助。 没有帮助。
2 条回复
1楼 Lineloop 0 2023-02-03 00:33:56
要修复这些类型的错误，您需要了解列在引导程序中的工作方式：
引导列以这种方式划分，目前在您的代码中您只输入了col ，这意味着它们是未指定其大小但适合下一列的列；
取而代之的是，在此示例中，列被表示出来，您可以命令显示从移动设备到桌面：
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>A basic website with Bootstrap #1</title> <.-- Including Bootstrap here--> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap:min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle:min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid bg-secondary"> <div class="row"> <div class="col-6 col-md-12"> <h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1> </div> <div class="col-6 col-md-12"> <img src="https.//e7.pngegg.com/pngimages/526/683/png-clipart-take-out-chef-s-uniform-cafe-yuva-indian-cuisine-master-chef-thumbnail.png" class="img-responsive" alt=""> </div> </div> <div class="row"> <div class="col-12"> <!--col-12 means that on all devices it will be 100% width magnitude--> <h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2> </div> </div> </div> <!--<div class="container-fluid menu-options"> <div class="col"> <button type = "button" class="btn mx-1 btn-primary">Home</button> <button type = "button" class="btn mx-1 btn-primary">Men's</button> <button type = "button" class="btn mx-1 btn-primary">Women's</button> <button type = "button" class="btn mx-1 btn-primary">Clearance</button> </div> </div> --> </body> </html>
（你看到了吗？简单地添加了md class，但还有很多其他的！）
在这种情况下，我在行中插入了两列，以便从移动设备上将视图分成两部分，然后在平板电脑（ md ）显示之后
2楼 Ashish Sharma 0 2023-02-03 16:52:34
我得到了离线帮助。 主要问题不在于 Bootstrap，而在于百分比的工作方式。 我在元素上有 h-25 class。 h-25 class 尝试将元素的高度设置为其父元素的 25%。 但是，百分比只有在父项具有定义明确/固定的高度时才能正常工作。 当父级没有明确定义的高度时，浏览器会进入一种反馈循环，因为它会尝试将高度设置调整为百分比，同时也会调整父级高度以包含它。
解决方案
最简单的解决方案是删除“h-25”并在
另一种选择是在父级上设置固定高度，以便可以明确计算百分比。
我选择了第一个选项，因为在图像上放置一个大小可以使其在较小视口上不会溢出容器的情况下响应。
问题未解决？试试搜索： 图像容器在引导程序中炸毁整个页面。
图像链接块占据页面的整个宽度
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.