简体   繁体   English

Bootstrap Fieldset Legend完全被Panel Panel覆盖-默认值

[英]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 我在第一个div中有两个字段集,然后我在使用面板,但是我的面板覆盖了上面的div,请参见下面的屏幕截图

1.) With Filedsets and details 2.) After adding panel, Panel-heading to page it covers the whole content 1.)具有文件集和详细信息2.)添加面板后,面板标题将覆盖整个内容

在添加面板之前

在这里添加面板之后

<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 您可以在bootstrap中使用行类。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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