时间戳

首页 > 解决方案 > 尝试将“宽度”内联样式属性应用于跨度标签

html - 尝试将“宽度”内联样式属性应用于跨度标签

问题描述

我遇到了以下问题：我试图在 Bootstrap 4 中的每个标题标题（参见图片）下分隔每个值。它们目前被设置为标签，因为我们在手风琴内部。我尝试了以下方法，但没有奏效：

<span style="width: pecentagenumber%">NUMBER</span>

我怎样才能做到这一点？

我当前的代码：

 <div id="accordion>
        <h3>
          <span>@bill.MonthName, @bill.Year</span>
          <span>@bill.PackageCount</span>
          <span>Tier @bill.Tier</span>
          <span>$@bill.TotalPrice</span>
          <span>UNPAID</span>
        </h3>
    </div>

这就是它目前的样子。 在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

如果您具有编辑 HTML 的灵活能力 - 让我们使用 bootstrap 4row和cols结构。

<div id="accordion" class="container">
  <h3 class="row">
    <span class="col">@bill.MonthName, @bill.Year</span>
    <span class="col">@bill.PackageCount</span>
    <span class="col">Tier @bill.Tier</span>
    <span class="col">$@bill.TotalPrice</span>
    <span class="col">UNPAID</span>
  </h3>
</div>

这样，您将获得 5 个具有相同宽度的列。最好div改用h3and span，但我尝试根据您的要求调整它。

更多关于BS4 网格系统

推荐阅读