当前位置： 文江博客话题详情

带有bootstrap的卡之间的边距

发布于 2025-02-13 20:42:01 字数 3815 浏览 0 评论 0原文

我有一些带有引导程序的卡，我想离开边缘...我希望这些卡在整个宽度上均匀分布。 基本上，您可以看到右边有红色，我希望没有...

.azer {
  background: red;
}

.card-annuaire {
  background: green;
  border: 0;
  border-radius: 0;
  margin-right: 1rem;
}

.card-annuaire .card-body {
  text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf">
        <div class="azer">
          <div class="col-md-12">
            <div class="row g-0">
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

您可以在此处查看： https://codepen.io/zazzazzou/pen/pen/pen/pen/abydzql

这就是我想做的：（第一张卡和最后一张卡之前和之后没有左右边缘）

原文

I have some card with bootstrap and I would like to have left margin...I would like the cards to be evenly distributed across the width.
Basically, You can see that there is red on the right, and I wish there wasn't...

.azer {
  background: red;
}

.card-annuaire {
  background: green;
  border: 0;
  border-radius: 0;
  margin-right: 1rem;
}

.card-annuaire .card-body {
  text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf">
        <div class="azer">
          <div class="col-md-12">
            <div class="row g-0">
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

You can see here: https://codepen.io/zazzou/pen/abYdZQL

EDIT
This is what I would like to do : (no margin left and right before and after the first card and last card)
my image

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

舟遥客 2025-02-20 20:42:01

从.card-annuaire类中删除保证金：1REM;，然后在上替换g-0行代码>类<代码> GX-3 。这在您的卡之间添加了沟渠

编辑：查看此链接以获取有关沟槽如何在bootstrap中工作的更多信息： bootstrap gutters

Remove the margin-right: 1rem; from the .card-annuaire class, and replace g-0 on your row class to gx-3. This adds gutters in between your cards

Edit: Check this link out for more info on how gutters work in bootstrap: Bootstrap Gutters

回复 原文
情绪操控生活 2025-02-20 20:42:01
  • 恢复圆柱排水沟
  • 使卡片全宽度
  • 放置在行上的红色背景，而不是单独的元素
.azer {
  background: red;
}

.card-annuaire {
  width: 100%;
  background: green;
  border: 0;
  border-radius: 0;
  margin-right: 1rem;
}

.card-annuaire .card-body {
  text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf">
        <div class="col-md-12">
          <div class="row azer">
            <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-3 grid-item-annuaire letter">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  • Restore the column gutters
  • Make the cards full width
  • Place the red background on the row rather than a separate element

.azer {
  background: red;
}

.card-annuaire {
  width: 100%;
  background: green;
  border: 0;
  border-radius: 0;
  margin-right: 1rem;
}

.card-annuaire .card-body {
  text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf">
        <div class="col-md-12">
          <div class="row azer">
            <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-3 grid-item-annuaire letter">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

回复 原文
淤浪 2025-02-20 20:42:01

您需要从.card-annuaire直接删除保证金：

.card-annuaire {
      background:green;
            border:0;
            border-radius: 0;
            .card-body {
                text-align: center;
            }

更新

如果双方的边距

.card-annuaire {
      background:green;
            border:0;
            border-radius: 0;
            margin:0 1rem;
            .card-body {
                text-align: center;
            }

，则可以这样做：

.azer {
  background: red;
}

.card-annuaire {
  background:green;
        border:0;
        border-radius: 0;
        margin:0 1rem;
        .card-body {
            text-align: center;
        }
    }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf" >
        <div class="azer">
          <div class="col-md-12">
            <div class="row g-0">
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

You need to remove margin right from .card-annuaire Like this:

.card-annuaire {
      background:green;
            border:0;
            border-radius: 0;
            .card-body {
                text-align: center;
            }

Update

If you margin on both sides then you can do:

.card-annuaire {
      background:green;
            border:0;
            border-radius: 0;
            margin:0 1rem;
            .card-body {
                text-align: center;
            }


.azer {
  background: red;
}

.card-annuaire {
  background:green;
        border:0;
        border-radius: 0;
        margin:0 1rem;
        .card-body {
            text-align: center;
        }
    }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf" >
        <div class="azer">
          <div class="col-md-12">
            <div class="row g-0">
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

回复 原文
~没有更多了~

关于作者

兔姬

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文