Html 如何使用引导创建多行组？

我是Bootstrap新手，我正在尝试使用Bootstrap

input groups

和

input groupprepend

标题创建一个HTML表单。我需要能够在相关的

表单控件

元素中创建一行，其中包含一个预先挂起的标题和多个样式行，如下所示：

到目前为止，我的HTML尝试如下所示：

<div class="container"> 
    <div class="row">
        <div class="input-group mb-2 col-12">
            <div class="input-group-prepend">
                <span class="input-group-text">Caption<br/></span>
            </div>
            <span class="form-control">
                <p>Line 1</p>
                <p><strong>Line 2</strong></p>
                <p><strong>Line 3</strong></p>
            </span>
        </div>
    </div>
</div>

标题

第1行

第2行

第3行

结果如下：

---

如何在边界区域的右侧区域中获得多条线？非常感谢您的建议。

您应该使用

输入组插件

并删除类

表单控件

像

标题

第1行
第2行

第3行

您应该使用

输入组插件

并删除类

表单控件

像

标题

第1行
第2行

第3行

您可以使用以下方法和一些海关规则来删除内部

边界半径（在前置标签和行之间）


.input group.list group.list group项目{
边框左上半径：0px；
边框左下半径：0px；
}
.input group.input group prepend{
边框右上角半径：0px；
边框右下半径：0px；
}

标题


第1行
第2行

第3行


您可以使用以下方法和一些海关规则来删除内部
边界半径（在前置标签和行之间）


.input group.list group.list group项目{
边框左上半径：0px；
边框左下半径：0px；
}
.input group.input group prepend{
边框右上角半径：0px；
边框右下半径：0px；
}

标题


第1行
第2行

第3行


感谢您的快速回复，Kenny。您的答案解决了多行问题，但右侧的边界丢失。你知道我如何保留它们吗？你需要给类
表单控件
赋予
p
元素。更新答案谢谢你的快速回复，肯尼。您的答案解决了多行问题，但右侧的边界丢失。你知道我如何保留它们吗？你需要给类
表单控件
赋予
p
元素。最新答案