Bootstrap Flex 布局在使用溢出隐藏或溢出自动时会切断阴影

问题描述 投票：0回答：1

考虑以下使用 Bootstrap 类的标记：

  • 该布局由使用 
    flex-row
    左右放置的两张卡片组成。
  • 使用 
    flex-fill
    将卡片安装到可用的垂直空间。
  • 虽然卡片使用可用的垂直空间，但如果溢出卡片，其内容应该滚动。我已经使用 
    .example-large-content
    类演示了大量内容。
  • 卡片有阴影。
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    html,
    body {
      overscroll-behavior: none;
    }

    .example-large-content {
      min-height: 20rem;
    }
  </style>
</head>

<body class="d-flex flex-column vh-100 bg-light p-5">
  <main class="d-flex flex-row flex-fill gap-3 overflow-auto">
    <div class="card border-0 rounded-4 flex-fill shadow">
      <div class="card-body d-flex flex-column gap-3 overflow-auto">
        <div class="example-large-content p-3 rounded-2 bg-danger">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-warning">
          Large content
        </div>
      </div>
    </div>
    <div class="card border-0 rounded-4 flex-fill shadow">
      <div class="card-body d-flex flex-column gap-3 overflow-auto">
        <div class="example-large-content p-3 rounded-2 bg-danger">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-warning">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-success">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-primary">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-info">
          Large content
        </div>
      </div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

问题与同时使用 

overflow-auto
和 
shadow
有关。阴影的最左、最右和底部被切断，但它们出现在左右卡片之间的间隙中：

enter image description here

有办法解决这个问题吗？

html css twitter-bootstrap flexbox bootstrap-5
1个回答
0
投票

我给了 

main
p-5 班级，并将其从 
body
中删除。现在 
main
可以占据身体的整个宽度，这导致了截断。 
body
仍然可以有
p-5
，但卡片会变小。

html,
body {
  overscroll-behavior: none;
}

.example-large-content {
  min-height: 20rem;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="d-flex flex-column vh-100 bg-light">
  <main class="d-flex flex-row flex-fill gap-3 overflow-auto p-5">
    <div class="card border-0 rounded-4 flex-fill shadow">
      <div class="card-body d-flex flex-column gap-3 overflow-auto">
        <div class="example-large-content p-3 rounded-2 bg-danger">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-warning">
          Large content
        </div>
      </div>
    </div>
    <div class="card border-0 rounded-4 flex-fill shadow">
      <div class="card-body d-flex flex-column gap-3 overflow-auto">
        <div class="example-large-content p-3 rounded-2 bg-danger">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-warning">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-success">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-primary">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-info">
          Large content
        </div>
      </div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.