css 将“演示”和“GitHub”按钮与卡片左下方对齐

izj3ouym 于 2022-11-26 发布在 Git

关注(0)|答案(1)|浏览(137)

我想将“demo”和“github”按钮组对齐到卡片的左下角，我不想让它随着写入的文本量而移动
标签。请帮助。我正在使用HTML，CSS，和引导程序5。
我确实尝试过垂直对齐和对齐内容，但是，也许我用错了。请帮助。下面的photoshopped图像是我希望“演示”和“github”按钮组放置的位置，而不考虑<p>标签

中内容的长度
下面是我的代码

With the footer

css

来源：https://stackoverflow.com/questions/74575345/align-the-demo-github-buttons-to-the-bottom-left-of-the-card

1条答案

按热度按时间

hgqdbh6s1#

您只需要利用.card-footer，请参阅文档的卡布局部分。
下面是一个使用.card-footer.bg-white.border-0作为.btn-group Package 器的示例：

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

<div class="row row-cols-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer bg-white border-0">
        <div class="btn-group">
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer bg-white border-0">
        <div class="btn-group">
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer bg-white border-0">
        <div class="btn-group">
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
        </div>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2022-11-26

我来回答

css 将“演示”和“GitHub”按钮与卡片左下方对齐

1条答案

相关问题

热门标签

最新问答