html - 顶部和底部的 Bootstrap 4 字段集图例字段

Question

任何人都可以建议如何在引导程序 4 的底部边框上添加图例文本

我试过了position，margin但没有用。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<fieldset class="border p-2">
   <legend  class="w-auto">Head</legend>
</fieldset>

预期的观点是

提前致谢

标签： htmlcssbootstrap-4

Answer 1

目前还没有官方的方法来实现这一点，但是使用很少的 css 就可以实现......

尝试这个..

<fieldset style="padding-bottom: 1rem;">
<legend>Personal:</legend>
Name: <input type="text" size="30"><br><br>
Email: <input type="text" size="30"><br><br>
Date of birth: <input type="text" size="10">
<label style="position: absolute; margin-top: 1.8rem; margin-left: -11.6rem;background-color: white;">Hello:</label>

确保该 Hello Label 上方至少有一个字段，否则它将被隐藏...我希望它有所帮助

根据您的要求调整margin-left....

在这里输出