简体   繁体   中英

Bootstrap Fieldset Legend is getting Covered by Panel Panel-default completely

I have two fieldsets in first div and then im using panel but my panel is covering from above div, Please see the below screen shots

1.) With Filedsets and details 2.) After adding panel, Panel-heading to page it covers the whole content

在添加面板之前

在这里添加面板之后

<div class="container">
    <div class="enquiry">

        <fieldset class="col-md-12">
            <legend><h3>Nag</h3></legend>
            <div class="row form-group">
                <div class="col-md-4">
                    <h4>DOB:&nbsp;<span>22-April-2001, Male</span> </h4>
                    <h4>Enquired:&nbsp;<span>07 </span> </h4>
                    <h4>Academic Year:&nbsp;<span>2017-2018</span></h4>
                </div>
                <div class="col-md-4">
                    <h4>Nagarjuna  (Father)</h4>
                    <h4><i class="fa fa-phone"></i>&nbsp;9635821471</h4>
                    <h4><i class="fa fa-envelope"></i>&nbsp;<span class="enq-parent-email">nag.akki@gmail.com</span> </h4>
                </div>
                <div class="col-md-4">
                    <h4>
                        <i class="fa fa-home fa-2x"></i>

                    </h4>
                </div>
            </div>
        </fieldset> 

        <fieldset class="col-md-12 margin-bottom">
            <legend><h3>Overview</h3></legend>
            <div class="row form-group margin-bottom">
                <div class="col-md-4">
                    <label>Current Name: </label>
                    <input type="text" class="form-control" readonly="" value="Name">
                </div>
                <div class="col-md-4">
                    <label>Current Loasdaf Name: </label>
                    <input type="text" class="form-control" readonly="" value="asdfaiwewrw">
                </div>
                <div class="col-md-4">
                    <label>fasdaskdlfa;skdljfa;skldf</label><br>
                    <input type="radio" name="transport" readonly="" checked=""> Yes
                    <input type="radio" name="transport" readonly=""> no
                </div>
            </div>
            <div class="row form-group margin-bottom">
                <div class="col-md-4">
                    <label>Current  Address: </label>
                    <input type="text" class="form-control" readonly="" value="#07, Kondar, Melborne-38">
                </div>
                <div class="col-md-4">
                    <label>asdfasdfasdf</label>
                    <input type="text" class="form-control" readonly="" value="asdfasd">
                </div>
                <div class="col-md-4">
                    <label>asdfasdfasdfasd</label><br>
                    <input type="radio" name="visit" readonly="" checked=""> Yes
                    <input type="radio" name="visit" readonly=""> no
                </div>
            </div>
            <div class="row form-group margin-bottom">
                <div class="col-md-4">
                    <label>asdfasdfasdfa</label>
                    <input type="text" class="form-control" readonly="" value="asdfasdf">
                </div>
                <div class="col-md-4">
                    <label>asdfasdfasdfasd</label>
                    <input type="text" class="form-control" readonly="" value="asdfasdf">
                </div>
                <div class="col-md-4">
                    <label>asdfasdfasdfas</label><br>
                    <input type="radio" name="visit" readonly="" checked=""> Yes
                    <input type="radio" name="visit" readonly=""> no
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-4">
                    <label>Enquiry Status </label>
                    <select class="form-control">
                        <option value="">Select Status</option>
                        <option value="Inprogress">Inprogress</option>
                        <option value="ConvertedtoApplication">Converted to Application</option>
                        <option value="Cloased, Not Interested"></option>
                    </select>
                </div>
                <div class="col-md-8">
                    <label>Questions ?</label>
                    <textarea class="form-control" rows="3"></textarea>
                </div>
            </div>
        </fieldset> 

    </div>
    <br>
</div>

在此处输入图片说明

This is very strange for me because i never seen such kind of issues.

Waiting for some response, Thanks in Advance!!

You can use row class in bootstrap.try this

<div class="container">
        <div class="row">

         <div class="enquiry">
            <fieldset class="col-md-12">
                .................................
            </fieldset> 
            <fieldset class="col-md-12 margin-bottom">
                ........................................
            </fieldset>
          </div>    
        </div>
        <div class="row">

            <h1>
              Add Here your content
            </h1>

        </div>

    </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM