将文本直接对齐 bootstrap 卡页脚内-解网

问：

在引导卡页脚中，我试图在右侧显示“丢失”状态。问题是，如果我给一些左边距来修复它 chrome，那么它在 Microsoft 边缘浏览器中看起来就不一样了。我将如何管理它，使其在所有浏览器上都能正常工作。以下是我在小提琴中尝试过的东西。

    <div  class="card tile-card">
   <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
         <i class="fa fa-icon fa-solid fa-dollar-sign opacity-10"></i>
      </div>
      <div class="text-end pt-1">
         <p class="text-sm mb-0 tile-title-p">ABC</p>
         <p class="text-xs mb-0 tile-subtitle-p">PQR</p>
         <p class="text-xs mb-0 tile-subtitle-p" style="font-weight:bold;font-style:italic">123</p>
      </div>
   </div>
   <div class="card-footer p-3">
      <p class="tile-subtitle-p tile-subtitle-footer mb-0">Updated On: <b>10/27/2023 &nbsp;&nbsp;&nbsp;&nbsp; 
      <span style="color: red; font-style: normal; margin-left:26px;">Lost</span></b></p>
   </div>
</div>

我的小提琴链接

CSS 引导程序-4

“我将如何管理它，使其在所有浏览器上都能正常工作。”- 我会首先改变页脚内容的结构。一开始就不应该有所有这些不间断的空格——元素之间的间距是 CSS 的职权范围。我会使“Lost”文本成为的单独子文本，然后使该页脚本身也成为 flexbox 元素。然后，您可以使用 flexbox 的常用对齐机制。.card-footer

0赞 Diego D 10/27/2023

否则，您应该添加 span 的样式（不是面向 bootstrap 的，并且与 flex 策略相反）float:right;

0赞 Obraine 10/27/2023

您能否编辑我的小提琴以展示如何使“丢失”文本成为 .card-footer 的单独子文本，然后使该页脚本身成为 flexbox 元素。对不起，我在CSS方面不太好

答：

1赞 livealvi 10/27/2023 #1

要在不同的浏览器中以一致的方式将“丢失”状态与卡片页脚的右侧对齐，您可以使用 Bootstrap 的类。此类将元素的左边距设置为 auto，这会导致它被推送到其容器的右侧。ml-auto

使用将“丢失”状态与卡片页脚的右侧对齐。ml-auto

法典：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card-footer p-3 d-flex justify-content-between">
  <p class="tile-subtitle-p tile-subtitle-footer mb-0">Updated On: <b>10/27/2023</b></p>
  <p class="tile-subtitle-p tile-subtitle-footer mb-0 ml-auto">
    <span style="color: red; font-style: normal;"><b>Lost</b></span>
  </p>
</div>

并将和添加到卡片页脚，使其成为一个 flex 容器，并将其子项与左右两侧对齐。使用 to “Lost” 状态元素将其推送到容器的右侧。d-flexjustify-content-betweenml-auto

JSFiddle：结果

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div  class="card tile-card">
   <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
         <i class="fa fa-icon fa-solid fa-dollar-sign opacity-10"></i>
      </div>
      <div class="text-end pt-1">
         <p class="text-sm mb-0 tile-title-p">ABC</p>
         <p class="text-xs mb-0 tile-subtitle-p">PQR</p>
         <p class="text-xs mb-0 tile-subtitle-p" style="font-weight:bold;font-style:italic">123</p>
      </div>
   </div>
   <div class="card-footer p-3">
      <p class="tile-subtitle-p tile-subtitle-footer mb-0">Updated On: <b>10/27/2023 
      <span style="color: red; font-style: normal; float:right;">Lost</span></b></p>
   </div>
</div>

下面是更新的工作小提琴。小提琴

0赞 Mohit Nandpal 10/28/2023 #3

如果你正在为你的页面使用库，那么你可以用多种方式来做到这一点。更好的方法是使用类来按行设置我们的数据，并添加元素类以在子类之间应用空间。添加这两个带有元素的类以应用 flexbox 容器。bootstrapd-flexjustify-content-betweencard-footer

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="card-footer p-3 d-flex justify-content-between">
  <p class="tile-subtitle-p tile-subtitle-footer mb-0">Updated On: <b>10/27/2023</b></p>
  <p class="tile-subtitle-p tile-subtitle-footer mb-0">
    <span style="color: red; font-style: normal;"><b>Lost</b></span>
  </p>
</div>

注意：我正在为此代码使用最新版本的 bootstrap5.3.2

上一个：无法将 svg 放在我的导航栏元素中居中

下一个：标头链接容器导航到导航栏中的搜索 .js 折叠错误

将文本直接对齐 bootstrap 卡页脚内

Align text right inside bootstrap card footer

评论

评论