程序员经验分享-hwhale

Bootstrap 5 - 卡片元素在底部对齐

2023-12-02

好吧，我是 Bootstrap 的新手，我试图将一个按钮元素始终放在卡片的底部，即使正文很小。然而，我总是收到这个结果，它没有将我的按钮放在我需要的右下角。

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="card col-8">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
      </div>
      <div class="col-md-8">
        <div class="card-body position-relative">
          <h2 class="card-title" style="font-weight: bold;">John Doe</h5>
            <h6 class="card-subtitle pb-3">Developer</h5>
              <p class="card-text pb-3">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 class="row justify-content-between">
                    <a href="#" class="col-2 btn btn-primary">Portfolio</a>
                    <div class="col-10">
                        <img src="/bootstrap-icons-1.7.2/facebook.svg" alt="Facebook Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/instagram.svg" alt="Instagram Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/linkedin.svg" alt="Linkedin Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/twitter.svg" alt="Twitter Icon" width="32" height="32">
                    </div>
                </div>
        </div>
      </div>
    </div>
  </div>




  <script src="js/bootstrap.js"></script>
</body>

</html>

enter image description here enter image description here


由于您已经将元素嵌套在bootstrap row你可以添加课程justify-content-end这是同义词justify-content: flex-end;我还声明了你的宽度a tag at w-25.

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="card col-8">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
      </div>
      <div class="col-md-8">
        <div class="card-body position-relative">
          <h2 class="card-title" style="font-weight: bold;">John Doe</h5>
            <h6 class="card-subtitle pb-3">Developer</h5>
              <p class="card-text pb-3">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 class="row justify-content-end">
                <a href="#" class="col-2 btn btn-primary w-25">Portfolio</a>
              </div>
        </div>
      </div>
    </div>
  </div>

Edit ~“如果该行中有两个元素，并且我想将一个元素放在右侧/开头，另一个元素放在左侧/结尾，该怎么办？”

然后使用justify-content-between。见下文。

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="card col-8">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
      </div>
      <div class="col-md-8">
        <div class="card-body position-relative">
          <h2 class="card-title" style="font-weight: bold;">John Doe</h5>
            <h6 class="card-subtitle pb-3">Developer</h5>
              <p class="card-text pb-3">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 class="row justify-content-between">
                <a href="#" class="col-2 btn btn-primary w-25">Portfolio</a>
                <a href="#" class="col-2 btn btn-primary w-25">Portfolio</a>
              </div>
        </div>
      </div>
    </div>
  </div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

twitterbootstrap

bootstrap5

Bootstrap 5 - 卡片元素在底部对齐 的相关文章

  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的

  • 在 IE 8 及以下版本中动态添加 @font-face 规则

    我使用 IE stylesheet addRule 方法添加 font face 规则 但是 符号对于该方法的 选择器 参数来说是不允许的字符 因此我收到 无效参数 错误 s addrule font face font family Fo

  • PyCharm 中有 HTML 块 {%%} 的快捷方式吗？

    我正在使用 HTML 块 例如 block content 经常使用 但必须输入括号和百分比符号很麻烦 有没有捷径或其他方法可以自动执行此操作 到目前为止我刚刚发现这个 PyCharm 中有插入 的快捷方式吗 https stackover

  • 使用 iframe 显示静态文本内容

    我有一个非常简单的要求 我有一个 div 我在其中显示一些文本内容的标签 我想在一个中显示相同的文本内容 我想要实现的目标已写在下面 有人可以帮忙吗 b div This is a content which I want to displ

  • 使用 或 实现可访问性的更好做法是什么？

    我有一个下载链接 但我找不到任何良好的可访问解决方案来说明如何处理这种情况 我遵循一个共同的经验法则 按钮做事 链接去地方 我的情况是 我有一个触发文档下载的按钮 同一页面 我相信这应该是一个具有按钮角色的锚点 因为它明确不触发重定向或导航

  • 我可以在 CSS 类名中使用驼峰命名法吗

    我想命名一个 CSS 类并调用它imgSuper 我可以在 CSS 类中使用驼峰命名法吗 从技术上讲是可以的 但这是有风险的 因为虽然 CSS 语法大多不区分大小写 但在某些浏览器中 在某些条件下 类名被视为区分大小写 因为规范没有指定浏览

  • 当 URL 包含片段时，iframe 会导致父元素在 Google Chrome 上向上滚动

    在 Google Chrome 37 0 2062 122 OSX Windows 上 具有包含片段的 URL 的 iframe 会导致父元素向上滚动 它只发生在 Chrome 中 在 Safari 和 Firefox 中测试 这是显示问题

  • IE7 显示问题：菜单中的表格

    我写了一个菜单样式 在 IE8 FF3 6 GC7 中运行良好 现在的问题是 我的老板希望它甚至可以在 IE7 上运行 我真的很努力地让它在 IE7 上运行 但无法获得相同的外观 menu css a outline none menu m

  • 从 Bootstrap 中删除字形

    如何从 bootstrap 3 中删除所有字形实例 看起来它已经大量嵌入到 css 文件中了 我正在努力使文件大小尽可能最小 只需简单地克隆引导程序https github com twbs bootstrap sass https git

  • 删除数据表列中的额外填充

    你好 我创建了 JQuery DataTables 如下所示 所以我的问题是如何删除 图片 列中过多的填充 这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a

  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li

  • 使用 jQuery/JS 打开时使
    标签的内容具有动画效果

    我只想要 HTML5 的内容details标记为 滑行 动画打开 而不是仅仅弹出打开 立即出现 这可以用 jQuery Javascript 实现吗 Fiddle http jsfiddle net 9h4Hq HTML

  • jquery从变量中删除html元素

    我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除 它的 ID 为 myButton 如何从变量中保存的 html 中删除它 我建议这种方法 var itin

  • 将div设置为隐藏，延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document

  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的

  • 如何在没有@import的情况下减少@import？

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c

  • 我可以使用 jQuery 打开下拉列表吗

    对于 HTML 中的下拉列表

  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div

  • 为什么 jquery 没有检测到单选按钮未被选中的情况？ [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c

  • CSS 是否有不等于选择器？

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

热门标签