Question

我遇到Bootstrap Contact Form的问题，当响应式设计更改导航栏时，它会消失。我现在无法找到它，但是当屏幕宽度低于991px时，导航栏基本上被移动和平板电脑的导航图标取代。（见CSS）

更好的概述：

工作原理：

可以通过按导航栏中的＆＃34; 4＆＃34; 打开联系表单。（这个词在PHP中替换为4，因为这是挪威语。）
也可以按＆＃34; bestill foredrag打开联系表格！＆＃34; 封面照片下方。

什么有效：

当屏幕尺寸大于991像素时，联系表格会在导航栏和封面照片下方打开。
991px以下：当我按下菜单图标然后按下列表链接时，会打开联系表格。

什么行不通：

991px以下：当我在封面照片下按＆＃34; bestill foredrag！＆＃34; 时，联系表格未被打开。

CSS

/* Header */
.navbar-header {
    width: 100%;
}

.navbar-header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar-header li {
    display: inline;
}

.navbar-inverse {
    background-color: white;
    border-color: white;
}

#navbar-brand-cont {
    padding-top: 5px;
}


.navbar-brand img {
    height: 22px;
}

#header_menu ul {
    list-style-type: none;
    margin: 0;
    padding-bottom: 10px;
    margin-top: 17px;   
}

#header_menu li {
    display: inline;
    margin-left: 30px;
    margin-right: 30px;
}

#header_menu li a {
    color: #000;
    text-decoration: none;
}

#header_menu li a:hover {
    color: #99cc66;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    #header_menu li {
        margin-left: 10px;
        margin-right: 10px;
    }
}

/*Hide dropdown links until they are needed*/
#header_menu li ul {
    display: none;
}

/*Make dropdown links vertical*/
#header_menu li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
#header_menu li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

/*Display the dropdown on hover*/
#header_menu ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/*Style 'show menu' label button and hide it by default*/
#header_menu .show-menu {
    text-decoration: none;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    display: none;
}

/*Hide checkbox*/
#header_menu input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
#header_menu input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 991px){
    /*Make dropdown links appear inline*/
    #header_menu ul {
        position: static;
        display: none;
        padding-left: 0px;
    }
    /*Create vertical spacing*/
    #header_menu li {
        margin-bottom: 10px;
        clear: both;
        display: block;
        margin-left: 0px;
        margin-right: 0px;
    }

    /*Make all menu links full width*/
    #header_menu ul li, li a {
        width: 100%;
        clear: both;
    }
    /*Display 'show menu' link*/
    #header_menu .show-menu {
        display:block;
    }
    .stortest {
    font-size: 18px;
    }
}



#myModal {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.modal-open {
    padding-right: 0!important;
}


.modal-content, .modal-dialog {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    text-align: left;
    margin-top: 60px;

}

.modal {
    position: fixed;
    right: o;
    top: 60px;
}

.modal-header {
    background: black;
    color: grey;
}

.modal-header .close {
    color: #99cc66 !important;
    text-shadow: 0px 0px;
}

.modal-header a:link {
    color: #99cc66 !important; 
}

.modal-body {
    background: #99cc66;
    text-align: left;
}

.btn {
    background: none;
}



.popover  {
    background-color: #black;
    color: #black;
    width: 250px;
}

.popover.right .arrow:after {
    border-right-color: #black;
}

.input-group[class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}   


.btn btn-custom pull-bottom {
    background-color: #99cc66;
}


h4.modal-title {
    color: #99cc66;
    margin-bottom:20px;
}

li.popupp {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}


/* Sosiale ikoner */

#icon-bar-holder {
    float: right;
}

#icon-bar-holder ul {
    padding-bottom: 0px;
    margin-top: 0px;
}

#icon-bar-holder li {
    list-style-type: none;
    margin-left: 0;
    margin-right: 0;
}

#iconbar-left, #iconbar-right {
    width: 50px;
    height: 50px;
}



#icon-bar-left, #icon-bar-left:hover, #icon-bar-right, #icon-bar-right:hover {
    width: 30px;
    height: 30px;
    background-size: 30px auto;
    display: inline-block;  
}


#icon-bar-left {
    background: url(img/ikoner/twitter_hover.png) no-repeat top left;
    background-size: 30px auto; 
}

#icon-bar-left:hover {
    background: url(img/ikoner/twitter.png) no-repeat top left;
    background-size: 30px auto;
}

#icon-bar-right {
    background: url(img/ikoner/facebook_hover.png) no-repeat top left;
    background-size: 30px auto; 
}

#icon-bar-right:hover {
    background: url(img/ikoner/facebook.png) no-repeat top left;
    background-size: 30px auto;
}


@media screen and (max-width : 365px) {
    #icon-bar img {
        display: none;
    }
}

@media screen and (max-width : 450px) {
    .navbar-brand img {
        height: 18px;
    }

    #icon-bar img {
        margin-top: 0px;
        width: 20px;
    }
}

@media only screen and (min-width: 100px) and (max-width: 450px) {
    .navbar-header {
        margin: 0;
    }
}

@media only screen and (min-width: 100px) and (max-width: 450px) {
    .navbar-header{
        margin-left: 0;
        margin-right: 0;
    }
    #header_menu {
        margin-top: 4px;
    }
}

@media only screen and (min-width: 451px) and (max-width: 991px) {
    #header_menu {
        margin-top: 8px;
    }
}

PHP - 导航栏

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
            <div id="navbar-brand-cont">
                <a class="navbar-brand" href="http://sookvisuals.com/dev/innbokskontroll">
                    <img src="<?php bloginfo('stylesheet_directory'); ?>/img/innbokskontroll.png">
                </a>
            </div>
            <div id="header_menu">
                <label for="show-menu" class="show-menu"><img src=<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/innbokskontroll_nav_menu.png height="15px"></label>
                <input type="checkbox" id="show-menu" role="button">
                <ul id="menu">
                    <li><a href="http://sookvisuals.com/dev/innbokskontroll/laer-innbokskontroll/" class="stortest btn btn-custom" >1</a></li>
                    <li><a href="http://sookvisuals.com/dev/innbokskontroll/referanser/" class="stortest btn btn-custom">2</a></li>
                    <li><a href="http://sookvisuals.com/dev/innbokskontroll/blogg" class="stortest btn btn-custom">3</a></li>
                    <li class="popupp"> 
                        <a href="#myModal" role="button" class="stortest btn btn-custom" data-toggle="modal">4</a>
                        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title">Bestill<br/>foredrag</h4>
                                        <p>Text</p>
                                        <p>Text</p>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal" name="commentform" method="post" action="send_form_email.php">
                                        <div class="form-group">
                                            <div class="col-md-6 input-group">
                                                    <input type="email" class="form-control" id="email" name="email" placeholder="E-post"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-md-9">
                                                    <textarea rows="8" class="form-control" id="comments" name="comments" placeholder="melding"></textarea>
                                            </div>
                                        <div class="col-md-2">
                                                    <button type="submit" value="Submit" class="btn btn-custom pull-right" id="send_btn"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png"></button> 
                                            </div>
                                        </div>
                                        </form>
                                    </div><!-- End of Modal body -->
                                </div><!-- End of Modal content -->
                            </div><!-- End of Modal dialog -->
                        </div><!-- End of Modal -->
                        <?php
                            // here comes the form - removed because it does not have any affect on this question.
                        ?>

                        <script>
                            $('#send_btn').popover({content: 'Takk for henvendelsen! Din melding blir sendt nå.'},'click'); 
                        </script>            
                </li>
                <div id="icon-bar-holder">
                    <ul>
                        <li id="iconbar-left">
                            <a href="http://facebook.com/innbokskontroll" target="blank">
                                <span id="icon-bar-left">
                                    &nbsp;
                                </span>
                            </a>

                        <li id="iconbar-right">
                            <a href="http://twitter.com/jkippers" target="_blank">
                                <span id="icon-bar-right">
                                    &nbsp;
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </ul>

        </div>          
    </div>
</nav>

PHP - 封面照片

<div id="bestill_lear_forside" class="row">
    <a href="#myModal" role="button" class="btn btn-custom" data-toggle="modal">
        <div id="bestill_forside" class="col-sm-6 svart">
                <div class="pull-right vertical-center half-content-wrapper" style="width: 100%;margin-right: 80px">
                        <img class="pull-left" src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v.png">
                        <span class="pull-right bestill_forside_venstre">Bestill foredrag!</span>
                </div>
            </div>
    </a>
        <a href="http://sookvisuals.com/dev/innbokskontroll/laer-innbokskontroll/" target="_self">
        <div id="lear_forside" class="col-sm-6 hvit">
            <div class="pull-left vertical-center half-content-wrapper" style="width: 100%;margin-left: 80px">
                        <img class="pull-right" src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png">
                        <span class="bestill_forside_hoyre">Lær innbokskontroll!</span>
                </div>
         </div>
    </a>
</div>

有什么想法吗？询问是否有任何混淆。我打算发布截图，但Photoshop停止工作......

Answer 1

只是为了澄清 - 在＆lt; 991px上没有显示div。.modal和.modal-dialog？我在这里看到一些问题 -

模态不应嵌套在列表项中;尝试删除此代码

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title">Bestill<br/>foredrag</h4>
                                        <p>Text</p>
                                        <p>Text</p>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal" name="commentform" method="post" action="send_form_email.php">
                                        <div class="form-group">
                                            <div class="col-md-6 input-group">
                                                    <input type="email" class="form-control" id="email" name="email" placeholder="E-post"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-md-9">
                                                    <textarea rows="8" class="form-control" id="comments" name="comments" placeholder="melding"></textarea>
                                            </div>
                                        <div class="col-md-2">
                                                    <button type="submit" value="Submit" class="btn btn-custom pull-right" id="send_btn"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png"></button> 
                                            </div>
                                        </div>
                                        </form>
                                    </div><!-- End of Modal body -->
                                </div><!-- End of Modal content -->
                            </div><!-- End of Modal dialog -->
                        </div><!-- End of Modal -->

从导航栏列表项中移动到主容器，因此移动大小菜单的折叠不会隐藏它。

还可以尝试将sm和xs列类（即col-sm-9，col-xs-9）添加到模式中，以便更好地控制移动版本。最后，在

.modal {
    position: fixed;
    right: o;
    top: 60px;
}

右：○;应该是对的：0。

Bootstrap模态联系表格消失

1 个答案: