Html 白色栏超出页面100%的右侧

发布于06月28日

我正在try 使用Bootstrap来获取响应卡.这个白色的栏目出现在页面之外，把卷轴放在右边，让我非常恼火.有谁可以帮我？

I HATE THIS

如果你有任何建议，我可以做得更容易，再次使用Bootstrap，请让我知道.我试着go 掉悬垂的div列的填充物，但除了有可怕的效果外，它也解决不了问题，帮我go 掉这该死的白色列.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<main class="row">
  <div class="col-xl-3 col-md-4 col-6">
    <div class="card p-2 m-1" style="width: auto;">
      <img src="https://via.placeholder.com/300x100" class=".card-img-top rounded radius" alt="...">

      <div class="card-body">
        <h5 class="card-title">Silhouette</h5>
      </div>

      <ul class="list-group list-group-flush">
        <li class="list-group-item">Group: Kana-Boon</li>
        <li class="list-group-item">Genre: J-Pop/Rock</li>
        <li class="list-group-item">Duration: 3:12</li>
      </ul>

      <div class="card-body">
        <a href="#" class="card-link">Card link</a>
      </div>
    </div>
  </div>

  <div class="col-xl-3 col-md-4 col-6">
    <div class="card p-2 m-1" style="width: auto;">
      <img src="https://via.placeholder.com/300x100" class=".card-img-top rounded radius" alt="...">
      <div class="card-body">
        <h5 class="card-title">Silhouette</h5>
      </div>

      <ul class="list-group list-group-flush">
        <li class="list-group-item">Group: Kana-Boon</li>
        <li class="list-group-item">Genre: J-Pop/Rock</li>
        <li class="list-group-item">Duration: 3:12</li>
      </ul>

      <div class="card-body">
        <a href="#" class="card-link">Card link</a>
      </div>
    </div>
  </div>

  <div class="col-xl-3 col-md-4 col-6">
    <div class="card p-2 m-1" style="width: auto;">
      <img src="https://via.placeholder.com/300x100" class=".card-img-top rounded radius" alt="...">
      <div class="card-body">
        <h5 class="card-title">Silhouette</h5>
      </div>

      <ul class="list-group list-group-flush">
        <li class="list-group-item">Group: Kana-Boon</li>
        <li class="list-group-item">Genre: J-Pop/Rock</li>
        <li class="list-group-item">Duration: 3:12</li>
      </ul>

      <div class="card-body">
        <a href="#" class="card-link">Card link</a>
      </div>
    </div>
  </div>

  <div class="col-xl-3 col-md-4 col-6">
    <div class="card p-2 m-1" style="width: auto;">
      <img src="https://via.placeholder.com/300x100" class=".card-img-top rounded radius" alt="...">
      <div class="card-body">
        <h5 class="card-title">Silhouette</h5>
      </div>
      
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Group: Kana-Boon</li>
        <li class="list-group-item">Genre: J-Pop/Rock</li>
        <li class="list-group-item">Duration: 3:12</li>
      </ul>
      
      <div class="card-body">
        <a href="#" class="card-link">Card link</a>
      </div>
    </div>
  </div>
</main>

Html 白色栏超出页面100%的右侧

推荐答案

Html相关问答推荐

为什么在这种情况下是弹性基础：自动不解决内容的大小？

如何将grid—template—column应用于元素中的子元素

为什么我的网页底部是蓝色背景而不是渐变色？

如何翻转卡片图像的背面

Django中的图像未从静态显示

根据按钮位置左/右对齐按钮

使用`<；use>；`与`<；img>；`时呈现的SVG大小不同

你将如何为手机制作导航栏

如何 Select 表格'；TMS Web Core中的body html元素？

来自元标记的响应文本

如何在悬停时使用 CSS 更改许多同级元素

带标签 css 的 div 内的中心图标

如何将一个边框向下移动

如何使用html css将图像显示为附加形状

CSS 中的 fingerprint scanner 动画

th 内的 div 标签没有占据全高

如何向上移动图像并溢出图像的一部分而另一部分不溢出

基本上，我想要两列包含文本和图像，但第二列是倒置的

表格布局：固定；文本溢出单元格时不起作用

粘性定位的子元素忽略父母的填充