Bootstrap 3导航菜单与WHMCS内容重叠

问题描述 投票：0回答：1

我正在为使用WHMCS的某些内容的网站进行重新设计。主站点使用Bootstrap 4，但是由于WHMCS将Bootstrap 3用于其模板，因此我开始对此进行重新编码。

除了导航以外，一切正常，在移动视图中，当导航扩展时，与其将页面内容按原样下压，不如将页面内容与其中的内容“混合”。我不确定这是我做错了什么，还是Bootstrap代码与WHMCS / Smarty不兼容。

有问题的站点在这里：http://vertimystsolutions.com/clients/?systpl=VsAqua3

这是我的header.tpl：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="icon" href="http://vertimystsolutions.com/v3/images/favicon-192.png">

    <!-- Bootstrap CSS -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="http://vertimystsolutions.com/v3/styles/vs_aqua_bs3.css">
    <script src="https://kit.fontawesome.com/9cf0b2704e.js" crossorigin="anonymous"></script>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    {include file="$template/includes/head.tpl"}

    {$headoutput}

    <title>{if $kbarticle.title}{$kbarticle.title} - {/if}{$pagetitle} - {$companyname}</title>
</head>
<body>
{$headeroutput}
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseNav" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="http://vertimystsolutions.com/v3/images/v3_logo_295_56.png" alt="Vertimyst Solutions"></a>
                </div>

                <div class="collapse navbar-collapse" id="collapseNav">
                    <ul class="nav navbar-nav">
                        <li><a href="http://vertimystsolutions.com/v3/index.php">Home</a></li>
                        <li><a href="http://vertimystsolutions.com/v3/services.php">Services</a></li>
                        <li><a href="http://vertimystsolutions.com/clients/cart.php">Register</a></li>
                        <li><a href="http://vertimystsolutions.com/clients/submitticket.php">Support</a></li>
                        <li><a href="http://vertimystsolutions.com/v3/contact.php">Contact</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="http://vertimystsolutions.com/v3/about.php">About</a></li>
                    </ul>
                </div><!-- /.collapse /.navbar-collapse-->
            </div><!-- /.container-fluid-->
        </nav>

<main>

{if $templatefile == 'homepage'}
    <section id="home-banner">
        <div class="container text-center">
            {if $registerdomainenabled || $transferdomainenabled}
                <h2>{$LANG.homebegin}</h2>
                <form method="post" action="domainchecker.php">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                            <div class="input-group input-group-lg">
                                <input type="text" class="form-control" name="domain" placeholder="{$LANG.exampledomain}" autocapitalize="none" />
                                <span class="input-group-btn">
                                    {if $registerdomainenabled}
                                        <input type="submit" class="btn search" value="{$LANG.search}" />
                                    {/if}
                                    {if $transferdomainenabled}
                                        <input type="submit" name="transfer" class="btn transfer" value="{$LANG.domainstransfer}" />
                                    {/if}
                                </span>
                            </div>
                        </div>
                    </div>

                    {include file="$template/includes/captcha.tpl"}
                </form>
            {else}
                <h2>{$LANG.doToday}</h2>
            {/if}
        </div>
    </section>
    <div class="home-shortcuts">
        <div class="container">
            <div class="row">
                <div class="col-md-4 hidden-sm hidden-xs text-center">
                    <p class="lead">
                        {$LANG.howcanwehelp}
                    </p>
                </div>
                <div class="col-sm-12 col-md-8">
                    <ul>
                        {if $registerdomainenabled || $transferdomainenabled}
                            <li>
                                <a id="btnBuyADomain" href="domainchecker.php">
                                    <i class="fas fa-globe"></i>
                                    <p>
                                        {$LANG.buyadomain} <span>&raquo;</span>
                                    </p>
                                </a>
                            </li>
                        {/if}
                        <li>
                            <a id="btnOrderHosting" href="cart.php">
                                <i class="far fa-hdd"></i>
                                <p>
                                    {$LANG.orderhosting} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a id="btnMakePayment" href="clientarea.php">
                                <i class="fas fa-credit-card"></i>
                                <p>
                                    {$LANG.makepayment} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a id="btnGetSupport" href="submitticket.php">
                                <i class="far fa-envelope"></i>
                                <p>
                                    {$LANG.getsupport} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
{/if}

{include file="$template/includes/verifyemail.tpl"}

<section id="main-body">
    <div class="container{if $skipMainBodyContainer}-fluid without-padding{/if}">
        <div class="row">

        {if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren())}
            {if $primarySidebar->hasChildren() && !$skipMainBodyContainer}
                <div class="col-md-9 pull-md-right">
                    {include file="$template/includes/pageheader.tpl" title=$displayTitle desc=$tagline showbreadcrumb=true}
                </div>
            {/if}
            <div class="col-md-3 pull-md-left sidebar">
                {include file="$template/includes/sidebar.tpl" sidebar=$primarySidebar}
            </div>
        {/if}
        <!-- Container for main page display content -->
        <div class="{if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren())}col-md-9 pull-md-right{else}col-xs-12{/if} main-content">
            {if !$primarySidebar->hasChildren() && !$showingLoginPage && !$inShoppingCart && $templatefile != 'homepage' && !$skipMainBodyContainer}
                {include file="$template/includes/pageheader.tpl" title=$displayTitle desc=$tagline showbreadcrumb=true}
            {/if}

还有我的CSS：

/* this css is for bootstrap 3 + whmcs */

html {
    position: relative;
    min-height: 100%;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

#main-body {
    background-color: #f8f8f8!important;
}

#home-banner {
    background-color: #f8f8f8!important;
}

#home-banner h2, p {
    color: #232323;
}

div.header-lined h1 {
    color: #232323!important;
    font-family: 'Open Sans Light', sans-serif!important;
}

.lead {
    color: #f8f8f8;
}

main {
    flex: 1;
}

.navbar-default { /* Bootstrap 3 */
    /*height: auto;*/
    color: #f8f8f8;
    border-color: #f8f8f8!important;
}

.navbar-brand { /* Bootstrap 3 */
    /*height: 86px;*/
    padding-bottom: 30px;
}

.navbar-default .navbar-nav { /* Bootstrap 3 */
        font-family: 'Open Sans Light', sans-serif!important;
        font-size: 1.4em!important;
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 25px;
        padding-bottom: 25px;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { /*bootstrap 3 */
    color: #2da1c3!important;
}

.footer {
    background-color: #232323;
    font-family: 'Open Sans Light', sans-serif;
    font-size: 1.0em;
    color: #8f8f8f;
}

.footer a{
    font-family: 'Open Sans Light', sans-serif;
    font-size: 1.0em;
    text-decoration: none;
    color:#8f8f8f;
}

.footer a:hover{
    font-family: 'Open Sans Light', sans-serif;
    font-size: 1.0em;
    text-decoration: none;
    color:#2da1c3;
}
html css twitter-bootstrap-3 smarty whmcs
1个回答
0
投票

只需添加CSS。希望对您有帮助。

    #collapseNav{
        background: #f9f3f3;
        z-index: 999;
        position: relative;
    }
    body .navbar-collapse.collapse{display:none !important}
   .navbar-nav {display:none}
   .navbar-nav .show{display:block;}

    jQuery('.navbar-toggle').on('click', function(e) {
        jQuery('.navbar-nav').toggleClass("show");
    });
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.