レジェンドタグがブートストラップグリッドで正しくレンダリングされない

Question

legend htmlタグを使用して、一連の同様の入力をフォームで視覚的に折り返したいと思っています。ブートストラップのないlegend属性を使用した場合の動作は、like is shown hereと似ています。

私はブーツリーの例which is hereを作った。わかるように：私は姓と名字の入力フィールドを囲む凡例を作成しようとしています。スタイリングは正しくありません。

私は既にthis questionを見ましたが、グリッド内で凡例を使用しようとしているため、私とは異なります。

Answer 1

ここにカスタムCSSを使用する方法があります。このCSSを追加し、このように表示するを持つfieldsetに.customLegendを追加してください。必要に応じて、位置、パディングなどを調整します。

.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>