如何根据现有页面中的内容调整bootstrap选项卡?

时间:2013-10-23 13:05:37

标签: javascript jquery html css twitter-bootstrap

我创建了一个“注册和登录”模式,以提供像flipcart.com这样的功能。我正在使用bootstrap'nav nav-tabs'来显示2个标签。

当我在单独的文件中创建该模态时,它工作正常,如下图所示:

enter image description here

但是当我将这个模态的相同代码放入我现有的项目文件中时,它会改变它的外观,如下图所示:

enter image description here

以下是此模式的代码:

                              <!-- Modal -->
  <div class="modal reg_modal" id="regestration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog" id="reg_outer_div"  >
      <div class="modal-content" style="background: white;">
        <div class="modal-header" id ="reg_modal_header" style="">
          <button type="button" class="close reg" id ="reg_close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" align="center" style="color:white;">Register Now</h4>
        </div><!--/header-->
        <div class="modal-body" style="background: white;">
            <div class="row" style="height:;background:white;">

                <div class="col-lg-8" style=" border-right:1px dotted black;">
                <div id ="reg_body_inner_left" style=""" > 
                                                            <div class="tabbable">
                                                              <ul class="nav nav-tabs">
                                                                <li class="active"><a href="#pane_login" data-toggle="tab">Login</a></li>
                                                                <li><a href="#pane_reg" data-toggle="tab">Registration</a></li>

                                                              </ul>
                                                              <div class="tab-content">
                                                                 <div id="pane_login" class="tab-pane active">
                                                                     <form id="login-form" target="login-signup-iframe" method="post" action="#" name="login-form">
                                                                            <div class="line rw">
                                                                                <div class="unit size1of4 lf lbl">
                                                                                    <label for="login_email_id" class="fk-label" style="">Email</label>
                                                                                </div>

                                                                                <div class="unit size3of4 lastUnit rt">
                                                                                    <input type="text" class="fk-input form-control" name="email" autocomplete="on" id="login_email_id" 
                                                                                    placeholder ="Your E-mail" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your E-mail'">

                                                                                 </div>
                                                                            </div>

                                                                            <div class="line rw">
                                                                                <div class="unit size1of4 lf lbl">
                                                                                    <label for="login_password" class="fk-label">Password</label>
                                                                                </div>

                                                                                <div class="unit size3of4 lastUnit rt">
                                                                                    <input type="password" class="fk-input form-control" name="password" id="login_password" 
                                                                                    onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'" placeholder="Password">
                                                                                    <input type="hidden" name="password_hash" id="login_password_hash">
                                                                                </div>
                                                                            </div>

                                                                            <div class="line rw">
                                                                                <center>
                                                                                <div class="lastUnit size3of4">
                                                                                <input type="hidden" name="__FK" value="V2572135e576087a5881915c1283b7afbcd1t18eX5IEBZKdt4uNhR3jhexbEaRIFCpOF9vZskYd3zsqf3SAP283BjliKf7NmRzwKcRY2EmOyZkpoQ1oT1nS69zyA==">
                                                                                <button type="button" class="btn btn-primary btn-small" style="border-radius:0px;margin-right:10px;">Log In</button>
                                                                                <a class="frgt-pswd" id="login_forgot" href="javascript:;">Forgot your password?</a>
                                                                                                    </div></center>
                                                                            </div>
                                                                                            <!-- <div class="line">
                                                                                    Don't have an account? <a class="signup-button" href="javascript:;">Create One!</a>
                                                                                </div> -->
                                                                           </form>

                                                                </div><!--/pane_login-->

                                                                <div id="pane_reg" class="tab-pane">
                                                                   <form id="regestration-form" target="login-signup-iframe" method="post" action="#" name="regestration-form">
                                                                        <div class="row" style="height:40px;">
                                                                            <div class="col-lg-4"style="">
                                                                            <label for="login_email_id" class="fk-label" style="margin-top:7px;height:15px;">Full Name</label>
                                                                            </div>
                                                                            <div class="col-lg-3" style="">
                                                                            <select class="form-control" style="color:#000;width:72px;margin-left:-35px;height:30px;font-size:11px;">
                                                                                  <option>Mr.</option>
                                                                                  <option>Ms.</option>
                                                                                  <option>Mrs.</option>
                                                                                  <option>Dr.</option>

                                                                                </select> </div>
                                                                            <div class="col-lg-5" style="">
                                                                               <input id="reg_name" type="text" class="fk-input " name="email" autocomplete="on" 
                                                                                  placeholder ="Your Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Name'">

                                                                            </div>
                                                                        </div>
<!--                                                                            <div class="line rw">-->
<!--                                                                                <div class="unit size1of4 lf lbl">-->
<!--                                                                                    <label for="login_email_id" class="fk-label" style="">Full Name</label>-->
<!--                                                                                </div>-->

<!--                                                                                <div class="unit size3of4 lastUnit rt">-->
<!--                                                                                -->
<!--                                                                                     <div class="input-group ">-->
<!--                                                                                      <div class="input-group-btn fk-input ">-->
<!--                                                                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>-->
<!--                                                                                        <ul class="dropdown-menu" style="position:relative !important">-->
<!--                                                                                          <li><a href="#">Mr.</a></li>-->
<!--                                                                                          <li><a href="#">Ms.</a></li>-->
<!--                                                                                          <li><a href="#">Mrs.</a></li>-->
<!--                                                                                          <li><a href="#">Dr.</a></li>-->
<!--                                                                                        </ul>-->
<!--                                                                                      </div><!-- /btn-group -->
<!--                                                                                              -->
<!--                                                                                           <input type="text" class="fk-input form-control" name="email" autocomplete="on" id="login_email_id" -->
<!--                                                                                           placeholder ="Your E-mail" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your E-mail'">-->
<!--                                                                                    </div><!-- /input-group -->
<!--                                                                                    -->
<!--                                                                                   </div>-->
<!--                                                                            </div>-->


                                                                            <div class="line rw">
                                                                                <div class="unit size1of4 lf lbl">
                                                                                    <label for="login_email_id" class="fk-label" style="">E-mail</label>
                                                                                </div>

                                                                                <div class="unit size3of4 lastUnit rt">
                                                                                    <input type="text" class="fk-input form-control" name="email" autocomplete="on" id="login_email_id" 
                                                                                    placeholder ="Your E-mail" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your E-mail'">

                                                                                 </div>
                                                                            </div>

                                                                            <div class="line rw">
                                                                                <div class="unit size1of4 lf lbl">
                                                                                    <label for="login_password" class="fk-label">Mobile No.</label>
                                                                                </div>

                                                                                <div class="unit size3of4 lastUnit rt">
                                                                                    <input type="text" class="fk-input form-control" name="mobileno" autocomplete="on" id="reg_mob_no" 
                                                                                    placeholder ="Mobile Number" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Mobile Number'">

                                                                                 </div>
                                                                            </div>

                                                                            <div class="line rw">
                                                                                <div class="unit size1of4 lf lbl">
                                                                                    <label for="login_password" class="fk-label">Location</label>
                                                                                </div>

                                                                                <div class="unit size3of4 lastUnit rt">
                                                                                    <input type="text" class="fk-input form-control" name="mobileno" autocomplete="on" id="reg_mob_no" 
                                                                                    placeholder ="Location" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Location'">

                                                                                 </div>
                                                                            </div>

                                                                            <div class="line rw">
                                                                                <center>
                                                                                <div class="lastUnit size3of4">
                                                                                <input type="hidden" name="__FK" value="V2572135e576087a5881915c1283b7afbcd1t18eX5IEBZKdt4uNhR3jhexbEaRIFCpOF9vZskYd3zsqf3SAP283BjliKf7NmRzwKcRY2EmOyZkpoQ1oT1nS69zyA==">
                                                                                <button type="button" class="btn btn-primary btn-small" style="border-radius:0px;margin-right:10px;">Save & Continue</button>
                                                                                <button type="button" class="btn btn-default btn-small" style="border-radius:0px;margin-right:10px;">Cancel</button>
                                                                                                    </div></center>
                                                                            </div>
                                                                                            <!-- <div class="line">
                                                                                    Don't have an account? <a class="signup-button" href="javascript:;">Create One!</a>
                                                                                </div> -->
                                                                           </form>
                                                                 </div>
                                                                </div><!-- /.tab-content -->
                                                            </div><!-- /.tabbable -->

                                                            <div id="OR">OR</div>
                    </div><!--/reg_body_inner_left-->
                    </div><!--col-lg-8-->

                    <div class="col-lg-4" align="center" style="">
                            <div style="top:50%;" ><h3>Sign in with</h4> </div><br>

                           <button type="button" class="btn btn-primary" style="border-radius:0px;"><a href="https://www.facebook.com"><i class="icon-facebook" style></i> facebook </a></button><br><br>
                           <button type="button" class="btn btn-primary"style="border-radius:0px; width:96px;"><a href="https://www.gmail.com"><b style="font-size:18px;">g</b> google </a></button>

                    </div><!--col-lg-4-->

                    </div><!--row-->
               </div>
          </div><!-- /end modal body-->




      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

和css相同:

#reg_modal_header{ background:green;border-top-left-radius:6px;border-top-right-radius:6px;border-radius:0px;}
#reg_close{ opacity:0.5;}
#reg_close:hover{opacity:1;}

.rw{height: 32px;line-height: 32px;margin: 10px 0;text-align: left;}
.size1of4 {width: 25%;float: left;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
.rt{overflow: hidden;}
.rw .rt input {font-size: 13px;padding: 0 0;valign:text-top; height:90%;width:90%;}

.lbl{border: 0;font-size: 100%;font: inherit;vertical-align: bottom;padding-top:3px;margin-top:2px;}
#login_email_id,#login_password,#reg_mob_no{border: 1px solid #ccc;resize: none;font-family: inherit;text-align:center;background:white;}
.fk-input{border: 1px solid #ccc;resize: none;font-family: inherit;text-align:center;background:white;font-size: 13px;}


div #OR{ height: 50px; width: 50px; border: 1px solid #ddd; border-radius: 50%; font-weight: bold; line-height: 50px; /* Equals elements height */
 text-align: center;font-size:20px;float:right;position: absolute;right: -25px;top:75px;z-index:1;background:white;
}
.reg_modal{border-radius:0px;border-bottom:4px solid green;}
.modal-body{border-bottom:4px solid green}
#reg_name{width:150px;margin-left:-50px;height:30px;}

所以,请任何人帮我解决这个问题,以便在我的项目中看起来也一样。 。先感谢您 。 。

1 个答案:

答案 0 :(得分:0)

尝试设置标签元素的z-index,因为模态的z-index可能比标签元素的z-index更多!