Bootstrap 5 --bs-gutter-x增加了1.5rem,这使得规则和其他元素可以挂起

r1zhe5dt  于 2023-03-06  发布在  Bootstrap
关注(0)|答案(1)|浏览(700)

我标记了代码,但大图是这种风格--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>
9rbhqvlz

9rbhqvlz1#

我也遇到过同样的问题。每次我使用Bootstrap时,我都把他们的CSS下载到我的CSS文件夹中。对我来说,有效的方法是更改bootstrap的CSS文件。找到确切的位置:--bs-Flume-x:1.5rem;把它拿走,就这样)

相关问题