Question

我正在为餐馆建立一个网站。导航栏覆盖整个页面，但只在特定页面上（购物车，登录，注册）。在主页或菜单页面上它可以正常工作。我正在主页上工作，之后，当我试图登录时，导航栏就在整个页面上。我不知道为什么它会这样做而且更多的是它＆＃39 ; s在特定页面上进行。在家庭html我添加了评论标签，让你知道我在问题出现之前添加了什么。

图片：

来自主页的

HTML：

    <head>
    <link rel="stylesheet" href="./assets/css/home-style.css"/>
</head>
<div class="container min-h main-container">
    <div class="main-container">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="<?php echo base_url();?>assets/images/pizza.jpg" alt="" style="height: 450px;">
                    <div class="carousel-caption d-none d-md-block">
                        <h1>Cea mai buna mancare din oras</h1>
                        <h3>Preturi mici</h3>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="<?php echo base_url();?>assets/images/poza2.jpg" alt="" style="height: 450px;">
                    <div class="carousel-caption d-none d-md-block">
                        <h1>Cea mai buna mancare din oras</h1>
                        <h3>Preturi mici</h3>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="<?php echo base_url();?>assets/images/poza1.jpg" alt="" style="height: 450px;">
                    <div class="carousel-caption d-none d-md-block">
                        <h1>Cea mai buna mancare din oras</h1>
                        <h3>Preturi mici</h3>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        **<!--This is what i added before the problem-->
        <section class="title-bestsellers">
            <h1 class="text-center">Cele mai vandute produse</h1>
        </section>
        <div class="food-container">
            <div class="product-container">
                <h3 class="text-center">Mancare Calda</h3>
                <hr>
                <img src="<?php echo base_url(); ?>assets/images/pizza.jpg" class="product-image"/>
            </div>
            <div class="product-container">
                <h3 class="text-center">Carne de porc</h3>
                <hr>
                <img src="<?php echo base_url(); ?>assets/images/pizza.jpg" class="product-image"/>
            </div>
            <div class="product-container">
                <h3 class="text-center">Garnituri</h3>
                <hr>
                <img src="<?php echo base_url(); ?>assets/images/pizza.jpg" class="product-image"/>
            </div>
        </div>
        <div class="two-wrappers">
            <div class="inner-static-img" id="left-inner-img">
                <a href="<?php echo base_url('meniu');?>" class="img-link"><h2>Meniu</h2></a>
                <a href="pizza.php" class="img-link"><h4>Arunca o privite in meniu.Sigur o sa-ti placa!</h4></a>
            </div>
            <div class="inner-static-img" id="right-inner-img">
                <h2>Noutati</h2>
                <h4>Incearca ulimele aparaitii in meniu!</h4>
            </div>
        </div>
    </div>
    <!--Untill here-->**
</div>

主页CSS：

    .title-bestsellers{
    margin-top: 50px;
}
body{
    background-color: white;
}
h4{
    color: white;
}
.carousel{
    margin-top: 60px;
}
.main-container{
    max-width: 1400px;
    margin: 0 auto;
    min-height: 100vh;
}
.two-wrappers{
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    margin-bottom: 40px;
}
.inner-static-img{
    box-sizing: border-box;
    flex-basis: 49%;
    height: 300px;
    border-radius: 15px;
    color:white;
    padding-top: 20px;
    padding-left: 15px;
}
.inner-static-img h2,h4{
    background: rgba(0,0,0, .7);
}
.carousel{
    margin-bottom: 30px;
}
.carousel-caption{
    width: 500px;
    margin: 0 auto;
    display: inline-block;
    background: rgba(0,0,0, .7);
    font-family: Comic Sans MS, Comic Sans, cursive;
}
#left-inner-img{
    background: url(../images/left.jpg)no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#right-inner-img{
    background-image: url(../images/right.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
a.img-link{
     text-decoration: none;
}
.img-link h2:hover{
    color: rgba(255,255,255,0.8);
}
.img-link h4:hover{
    color: rgba(255,255,255,0.8);
}

/*cele mai vandute*/
.food-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.product-container{
    padding: 5px;
    box-sizing: border-box;
    margin-top: 30px;
    margin-bottom: 50px;
    flex-basis: 30%;
}
.product-image{
    width: 100%;
    height: 250px;
}
.product-container p{
    text-align: center;
}
/*sfarsit cele mai vandute*/
@media only screen and (max-width: 1000px) {
    .two-wrappers{
        display: block;
    }
    .inner-static-img{
        margin: 20px 10px 10px 10px;
    }
}
@media(min-width: 900px) {
    .food-container{
        display: flex;
        justify-content: space-between;
    }
    .body{
        -webkit-overflow-scrolling: touch;
    }
}
@media(max-width: 900px){
    .food-container{
        display: block;
    }
}

部首：

    <?php $categories = $this->products_model->get_all_categories();?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>English Park Canteen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/header-style.css"/>
</head>
<body>
<nav class="navbar navbar-dark py-0 bg-dark navbar-expand-lg fixed-top">
    <div class="container">
    <a class="navbar-brand" href="<?php echo base_url('acasa');?>">English Park Canteen</a>
    <div class="d-flex order-lg-1 ml-auto pr-2">
        <?php if($this->cart->total()> 0):?>
            <span class="dot" style="color:white; padding-right: 5px;">( <?php echo $this->cart->total();?> lei )</span>
        <?php endif;?>
        <a href="<?php echo base_url('cos'); ?>" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
        <ul class="navbar-nav flex-row to-hide-nav">
            <?php if(!$this->session->userdata('logged_in')):?>
            <li class="nav-item mx-2 mx-lg-0">
                <a class="nav-link" href="<?php echo base_url('login');?>">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="<?php echo base_url('register');?>">Register</a>
            </li>
            <?php else:?>
            <li class="nav-item mx-2 mx-lg-0">
                <a class="nav-link" href="#"><?php echo $this->session->userdata('name');?></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="<?php echo base_url();?>users/logout">Logout</a>
            </li>
            <?php endif;?>
        </ul>
    </div>
    <button class="navbar-toggler mt-1" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="<?php echo base_url('acasa');?>">Acasa<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Meniu
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <?php foreach ($categories as $category):?>
                        <a class="dropdown-item" href="<?php echo site_url('/menu/'.$category['category_name']);?>"><?php echo $category['category_name'];?></a>
                    <?php endforeach;?>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a href="tel:0746-117-702"><p class="dropdown-item">0746117702</p></a>
                    <a href="tel:0742112452"><p class="dropdown-item">0742112452</p></a>
                    <a href="tel:0735212352"><p class="dropdown-item">0735212352</p></a>
                </div>
            </li>
            <?php if(!$this->session->userdata('logged_in')):?>
                <li class="nav-item to-hide">
                    <a class="nav-link" href="<?php echo base_url('login');?>">Login</a>
                </li>
                <li class="nav-item to-hide">
                    <a class="nav-link" href="<?php echo base_url('register');?>">Register</a>
                </li>
            <?php endif;?>
            <?php if($this->session->userdata('logged_in')):?>
                <li class="nav-item to-hide">
                    <a class="nav-link" href="<?php echo base_url('profil');?>"><?php echo $this->session->userdata('name');?></a>
                </li>
                <li class="nav-item to-hide">
                    <a class="nav-link" href="<?php echo base_url();?>users/logout">Logout</a>
                </li>
            <?php endif;?>
        </ul>
    </div>
    </div>
</nav>
<?php if($this->session->flashdata('user_loggedin')): ?>
    <div class="hide-it text-center"><?php echo '<p class="alert alert-success">'.$this->session->flashdata('user_loggedin').'</p>'; ?></div>
<?php endif; ?>
<?php if($this->session->flashdata('user_loggedout')): ?>
    <div class="hide-it text-center"><?php echo '<p class="alert alert-success">'.$this->session->flashdata('user_loggedout').'</p>'; ?></div>
<?php endif; ?>
<?php if($this->session->flashdata('check_email_exists')): ?>
    <div class="hide-it text-center"><?php echo '<p class="alert alert-danger">'.$this->session->flashdata('check_email_exists').'</p>'; ?></div>
<?php endif; ?>
<?php if($this->session->flashdata('user_registered')): ?>
    <div class="hide-it text-center"><?php echo '<p class="alert alert-success">'.$this->session->flashdata('user_registered').'</p>'; ?></div>
<?php endif; ?>
<?php if($this->session->flashdata('order_placed')): ?>
    <div class="hide-it text-center"><?php echo '<p class="alert alert-success">'.$this->session->flashdata('order_placed').'</p>'; ?></div>
<?php endif; ?>
<script>
    $(function() {
        $(".hide-it").fadeOut(3000);
    });
</script>

标题的CSS：

.bg-dark{
    background-color: #000!important;
}
.dropdown-menu{
    background-color: black;
}
.dropdown-item{
    color: white!important;
}
.dropdown-item:focus, .dropdown-item:hover{
    background-color: #333333;
}
.alert{
    margin-top: 40px;
}
.container{
    max-width: 1370px;
    margin:0 auto;
}
.test{
    width: 100%;
    height: 50px;
    background-color: grey;
    text-align: center;
}
@media only screen and (max-width: 990px) {
    .to-hide{
        visibility: visible;
    }
    .to-hide-nav{
        display: none;
    }
    .container{
        margin-bottom: 10px;
    }
}
@media only screen and (min-width: 990px) {
    .to-hide{
        visibility: hidden;
    }
    .to-hide-nav{
        visibility: visible;
    }
}

有一个问题的页面：

HTML：

<head>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/assets/css/lr-style.css"/>
</head>

<?php echo form_open('users/login'); ?>
<div class="container">
    <div class="to-be-center">
        <div class="title-center">
            <h1 class="text-center"><?php echo $title;?></h1>
        </div>
        <div class="login-form">
            <div class="name-input form-group">
                <input type="text" name="email" class="form-control" placeholder="Email"/>
            </div>
            <div class="password-input form-group">
                <input type="password" name="password" class="form-control" placeholder="Parola"/>
            </div>
            <input type="submit" class="btn btn-black" value="Login" name="login"/>
        </div>
    </div>
</div>
<?php echo form_close();?>

CSS：

.container{
    width: 100%;
    height: 100%;
    min-height: 100vh;
    margin-top: 150px;
    display: flex;
}
.to-be-center{
    width: 50%;
    margin: 0 auto;
}
.btn-black{
    background-color: black;
    color: white;
}
.alert{
    margin-top: 40px;
}

@media only screen and (max-width: 990px){
    .btn-black{
        margin-bottom: 10px;
    }
}

任何想法为什么？...我知道它的代码很多......对不起！

Answer 1

要解决此问题，请将Header.html中的容器类更改为 container-fluid

<nav class="navbar navbar-dark py-0 bg-dark navbar-expand-lg fixed-top">
    <div class="container">

更改为

<nav class="navbar navbar-dark py-0 bg-dark navbar-expand-lg fixed-top">
    <div class="container-fluid">

代码示例供参考 - https://codepen.io/nagasai/pen/WzYwyo

问题是由于标题内的容器类也有100％的宽度和高度，尝试将该容器类更改为header.html中的容器流体

引导导航栏覆盖整个页面，但不是所有页面

1 个答案: