我标记了代码,但大图是这种风格--bs-gutter-x:1.5rem;从_grid_scss添加:6.添加样式以覆盖bs-gutter-x:0 rem;没有修复它。我见过其他人遇到这个问题,但还没有看到修复它的解决方案。
Here is a bug report
有人有什么解决办法吗?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="card tester_card m-2">
<div class="row">
<div class="row">
<div class="col-1 m-1 tester_avatar">
<img id="tester_author_image" class="rounded-circle shadow-1-strong" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=25x25" alt="avatar">
</div>
<div class="col m-1">
<p id="tester_top">jon 19 minutes ago </p>
</div>
<div id="three-dots" style="display: block" class="col-auto">
<div class="dropdown">
<p href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></p>
<div class="dropdown-menu">
<p id="tester_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(9)">
<i class="bi bi-pencil-square"> Edit</i>
</p>
<p id="tester_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
<i class="bi bi-eye-slash"> Ban</i>
</p>
<p id="tester_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
<i class="bi bi-clock-history"> History</i></p>
</div>
</div>
</div>
</div>
<!--THIS ADDS --bs-gutter-x: 1.5rem; which throws the div off -->
<div class="row border-top border-bottom">
<p id="tester_body">test</p>
</div>
<div class="row">
<div class="reply">
<div class="reply">
<p id="upvote" class="p-0" onclick="upvote(9,1)">
<i id="upvote_icon9" class="bi bi-arrow-up"></i></p>
<p id="total_votes9">0</p>
<p id="downvote" onclick="upvote(9,0)">
<i id="downvote_icon9" class="bi bi-arrow-down"></i></p>
</div>
<p id="tester_reply_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_reply_modal(9)">
<i id="total_replies" class="bi bi-chat-left"> 0</i>
</p>
<p id="tester_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(9)">
<i class="bi bi-award"></i>
</p>
<div class="dropdown">
<p class="dropdown-toggle" data-bs-toggle="dropdown"><i class="bi bi-share"></i></p>
<ul class="dropdown-menu">
<p id="tester_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(9)">
<i class="bi bi-signpost-2"> Cross Post</i>
</p>
<p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/tester/9')">
<i class="bi bi-clipboard"> Copy Link</i>
</p>
<p id="save_tester" class="dropdown-item" onclick="save_tester(9)">
<i id="save_tester_icon9" class="bi bi-save"> Save</i>
</p>
</ul>
</div>
</div>
</div>
<div id="reply" class="row">
</div>
</div>
</div>
1条答案
按热度按时间9rbhqvlz1#
我也遇到过同样的问题。每次我使用Bootstrap时,我都把他们的CSS下载到我的CSS文件夹中。对我来说,有效的方法是更改bootstrap的CSS文件。找到确切的位置:--bs-Flume-x:1.5rem;把它拿走,就这样)