图例标记不能正确呈现引导程序网格

Question

我想使用legend html标记在窗体中直观地包装一组相似的输入。它看起来应该与使用legend属性时没有启动时的方式类似，like is shown here。

我做了一个bootply示例which is here。正如人们可以看到的：我试图创建一个包含名字和姓氏输入字段的图例。造型不对。

我已经看过this question，但它与我的不同，因为我试图在网格中使用图例。

Answer 1

这是使用自定义CSS的一种方法。只需添加此CSS，并将.customLegend添加到fieldset即可，您将以这种方式显示legend。根据需要调整定位，填充等。

.customLegend { 
 
    border: 1px solid #e5e5e5; 
 
    padding: 2em 0 1em; 
 
    margin-top: 2em; 
 
    position: relative; 
 
} 
 
.customLegend legend { 
 
    border: 0; 
 
    background: #fff; 
 
    width: auto; 
 
    transform: translateY(-50%); 
 
    position: absolute; 
 
    top: 0; left: 1em; 
 
    padding: 0 .5em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <form> 
 
    <fieldset class="customLegend row"> 
 
     <legend>Enter Your Name</legend> 
 
     <div class="form-group col-sm-6"> 
 
     <label for="first_name">First Name:</label> 
 
     <input type="text" class="form-control" id="email"> 
 
     </div> 
 
     <div class="form-group col-sm-6"> 
 
     <label for="last_name">Last Name:</label> 
 
     <input type="text" class="form-control" id="pwd"> 
 
     </div> 
 
    </fieldset> 
 
    
 
    <div class="form-group"> 
 
     <label for="email">Email address:</label> 
 
     <input type="email" class="form-control" id="email"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="pwd">Password:</label> 
 
     <input type="password" class="form-control" id="pwd"> 
 
    </div> 
 
    
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
    </form> 
 
</div>