首页 > 解决方案 > bootstrap 4模板文本格式问题

问题描述

我无法修复 2 行文本的文本格式

目前,它看起来像这样

在此处输入图像描述

我想这样展示

在此处输入图像描述

这是我正在使用引导程序的 HTML 代码

<label for="checkbox-group-1588093203851" class="radio-group-label">
<span class="mr-2">2.1.2</span> For the purposes of serving its clients, does the Reporting Firm maintain ongoing relationships with regulated financial institutions or other regulated professional service providers (e.g. referrals)?
<span class="formbuilder-required">*</span>
<span class="tooltip-element" tooltip="This does not include business operating accounts at financial institutions or professional services acquired for the functioning of the entity itself (e.g. legal advice to the entity, accountancy services for the entity, etc.).">?</span></label>

标签: htmlcssbootstrap-4

解决方案


如果您使用的是 Bootstrap 4,那么您可以简单地添加 classd-inline-flex并将label问题文本包装在 another 中,以便flex 容器 span只有两个直接子级。label

检查下面更新的 HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<label for="checkbox-group-1588093203851" class="radio-group-label d-inline-flex">
  <span class="mr-2">2.1.2</span>
  <span>
    For the purposes of serving its clients, does the Reporting Firm maintain ongoing relationships with regulated financial institutions or other regulated professional service providers (e.g. referrals)?
    <span class="formbuilder-required">*</span>
    <span class="tooltip-element" tooltip="This does not include business operating accounts at financial institutions or professional services acquired for the functioning of the entity itself (e.g. legal advice to the entity, accountancy services for the entity, etc.).">?</span>
  </span>
</label>


推荐阅读