为什么 border-left border-right 不适用于 Bootstrap 5 Django?
Why is the border-left border-right not working for Bootstrap 5 Django?
所以我有以下代码:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Verification Code Email</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.insta-icon{width:50%; float:right;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-1 offset-1 border-right"> # This one right here
<img class="insta-icon"src="{% static '/images/instagram_icon.png' %}">
</div>
<div class="col-10"> b</div>
</div>
</div>
<div class="container">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
现在,当我只执行 border
时,会显示边框,而当我执行 border-bottom
或 border-top
时,会显示边框。但是,当我使用 border-left
或 border-right
时,边框轮廓未显示。
此外,我尝试通过向 div class 添加 insta-nav
class 来使用样式,并通过添加 border:1px
覆盖样式,但是未添加边框。
这两个原因为什么会这样??任何帮助将不胜感激
您需要在 bootstrap 中使用 border-start
或 border-end
而不是 border-left
或 border-right
5.
水平方向敏感变量、实用程序和 mixins 已重命名为更符合逻辑的名称 — start
和 end
代替 left
和 right
in Bootstrap5.
您可以在此处查看更多 bootstrap 5 个迁移详细信息:
https://getbootstrap.com/docs/5.0/migration/#sass
所以我有以下代码:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Verification Code Email</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.insta-icon{width:50%; float:right;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-1 offset-1 border-right"> # This one right here
<img class="insta-icon"src="{% static '/images/instagram_icon.png' %}">
</div>
<div class="col-10"> b</div>
</div>
</div>
<div class="container">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
现在,当我只执行 border
时,会显示边框,而当我执行 border-bottom
或 border-top
时,会显示边框。但是,当我使用 border-left
或 border-right
时,边框轮廓未显示。
此外,我尝试通过向 div class 添加 insta-nav
class 来使用样式,并通过添加 border:1px
覆盖样式,但是未添加边框。
这两个原因为什么会这样??任何帮助将不胜感激
您需要在 bootstrap 中使用 border-start
或 border-end
而不是 border-left
或 border-right
5.
水平方向敏感变量、实用程序和 mixins 已重命名为更符合逻辑的名称 — start
和 end
代替 left
和 right
in Bootstrap5.
您可以在此处查看更多 bootstrap 5 个迁移详细信息: https://getbootstrap.com/docs/5.0/migration/#sass