Question

问题是如下我创建了一个PHP（CodeIgniter）项目，并希望构建主页 view / pages / home.php以及此处我有这段代码：

Home.php

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

    <title>Car Sharing</title>

    <!-- Bootstrap Core CSS -->
    <link href="assets/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Additional fonts for this theme -->
    <link href="assets/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

    <!-- Plugin CSS -->
    <link href="assets/lib/magnific-popup/magnific-popup.css" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="assets/css/creative.min.css" rel="stylesheet">

</head>

<body id="page-top">


    <header>
        <div class="header-content">
            <div class="header-content-inner">
                <h1 id="homeHeading">Putujmo Zajedno</h1>
                <hr>
                <p>Tražiš prevoz?</p>
                 <p>ili samo putuješ negdje?</p>
                <a href="<?php echo base_url()?>posts/create" class="btn btn-primary btn-xl page-scroll">Postavi Oglas</a>
            </div>
        </div>
    </header>

    <section class="bg-primary" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center">
                    <h2 class="section-heading text-white">We've got what you need!</h2>
                    <hr class="light">
                    <p class="text-faded">Putujmo zajedno - web stranica je naredni korak razvijanja ideje o djeljenju prevoza (carpooling) u Bosni i Hercegovini ali i šire, započeta putem društvene mreže Facebook od strane nekoliko aktivista i volontera.

                    Za nešto više od godinu dana, grupa na Facebook mreži je prešla 12 000 članova, sa nekoliko stotina oglasa mjesečno. Ovaj broj u razvoju saobraćajnih sistema predstavlja broj korisnika koji svojim prisustvom imaju potrebu za novim načinom prevoza, te organizovanja i komuniciranja unutar istog. To je bio još jedan razlog za pokretanje ove web stranice koja ima za cilj da olakša postavljanje oglasa za nuđenje i traženje prevoza, kao i pregled već postavljenih oglasa.

                    Uzevši u obzir da su ovo pionirski koraci na našim prostorima, otvoreni smo za sve prijedloge, kritike i svakako pohvale. Cijeli projekat dijeljenja prevoza je zasnovan na volonterskom radu i resursima pojedinaca, tako da je svaka vrsta podrške više nego dobrodošla.

                    Pored ove web stranice, grupa "Tražim- nudim prevoz" na Facebooku ostaje i dalje aktivna i operativna.</p>

                </div>
            </div>
        </div>
    </section>

    <section id="services">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">ZAŠTO PODIJELITI VOŽNJU?</h2>
                    <hr class="primary">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                        <i class="fa fa-4x fa-diamond text-primary sr-icons"></i>
                        <h3>Jeftinije je</h3>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                        <i class="fa fa-4x fa-paper-plane text-primary sr-icons"></i>
                        <h3>Brinemo o životnoj sredini</h3>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                        <i class="fa fa-4x fa-newspaper-o text-primary sr-icons"></i>
                        <h3>Brze je</h3>

                    </div>
                </div>
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                        <i class="fa fa-4x fa-heart text-primary sr-icons"></i>
                        <h3>Društvenije je</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="no-padding" id="portfolio">
        <div class="container-fluid">
            <div class="row no-gutter popup-gallery">
                <div class="col-lg-4 col-sm-6">
                    <a href="assets/images/HomePage/portfolio/fullsize/Beograd.jpg" class="portfolio-box">
                        <img src="assets/images/HomePage/portfolio/fullsize/Beograd.jpg" class="img-fluid" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Beograd
                                </div>

                            </div>
                        </div>
                    </a>

                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="assets/images/HomePage/portfolio/fullsize/Novi Sad.jpg" class="portfolio-box">
                        <img src="assets/images/HomePage/portfolio/fullsize/Novi Sad.jpg" class="img-fluid" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Novi Sad
                                </div>

                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-sm-6">
                    <a href="assets/images/HomePage/portfolio/fullsize/Sarajevoo.jpg" class="portfolio-box">
                        <img src="assets/images/HomePage/portfolio/fullsize/Sarajevoo.jpg" class="img-fluid" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Sarajevo
                                </div>

                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-sm-6">
                    <a href="assets/images/HomePage/portfolio/fullsize/Zagreb.jpg" class="portfolio-box">
                        <img src="assets/images/HomePage/portfolio/fullsize/Zagreb.jpg" class="img-fluid" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Zagreb
                                </div>

                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-sm-6">
                    <a href="assets/images/HomePage/portfolio/fullsize/Ljubljana.jpg" class="portfolio-box">
                        <img src="assets/images/HomePage/portfolio/fullsize/Ljubljana.jpg" class="img-fluid" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Ljubljana
                                </div>

                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-sm-6">
                    <a href="assets/images/HomePage/portfolio/fullsize/Wien.jpg" class="portfolio-box">
                        <img src="assets/images/HomePage/portfolio/fullsize/Wien.jpg" class="img-fluid" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Wien
                                </div>

                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>


    <aside class="bg-dark">
        <div class="container text-center">
            <div class="call-to-action">


            </div>
        </div>
    </aside>

    <section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center">
                    <h2 class="section-heading">Let's Get In Touch!</h2>
                    <hr class="primary">
                    <p>Ready to start your next trip  with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
                </div>
                <div class="col-lg-4 offset-lg-2 text-center">
                    <i class="fa fa-phone fa-3x sr-contact"></i>
                    <p>062/266-198</p>
                </div>
                <div class="col-lg-4 text-center">
                    <i class="fa fa-envelope-o fa-3x sr-contact"></i>
                    <p><a href="mailto:your-email@your-domain.com">demirmahmutovic@gmail.com</a></p>
                </div>
            </div>
        </div>
    </section>


    <script src="assets/lib/jquery/jquery.js"></script>


    <script src="assets/lib/tether/tether.min.js"></script>


    <script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="assets/lib/scrollreveal/scrollreveal.min.js"></script>
    <script src="assets/lib/magnific-popup/jquery.magnific-popup.min.js"></script> 
    <script src="assets/js/creative.min.js"></script>

</body>

</html>

而且我还有一个构造的页眉/页脚，代码位于标题下方的的header.php

<html>
    <head>
        <title>Car Sharing</title>
        <link rel="stylesheet" href="https://bootswatch.com/darkly/bootstrap.min.css"/> 
        <link rel="stylesheet" href="<?php echo base_url()?>assets/css/style.css">
    </head>

<body>

  <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="<?php echo base_url()?>pages/home">Car Sharing</a>
    </div>
    <ul class="nav navbar-nav">
         <?php if($this->session->userdata('logged_in')):?>

        <li><a href="<?php echo base_url();?>posts/create">Postavi Oglas</a></li>
        <li><a href="<?php echo base_url();?>categories/create">Postavi Kategoriju</a></li>
        <li><a href="<?php echo base_url();?>categories">Kategorije</a></li>
        <li><a href="<?php echo base_url();?>posts/index">Sve voznje</a></li>
        <li><a href="<?php echo base_url();?>about">O nama</a></li>
        <li><a href="<?php echo base_url();?>contact/index">Contact</a></li>
        <li><a href="<?php echo base_url();?>users/logout">Log out</a></li>


        <?php endif;?>



    </ul>
    <ul class="nav navbar-nav navbar-right">
    <?php if(!$this->session->userdata('logged_in')):?>
      <li><a href="<?php echo base_url()?>users/register"><span class="glyphicon glyphicon-user"></span> Registruj Se</a></li>
      <li><a href="<?php echo base_url()?>users/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      <?php endif ;?>
    </ul>
  </div>
</nav>




<div class="container">

<?php  if($this->session->flashdata('user_registred')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('user_registred').'</p>'?>
<?php endif;?>

<?php  if($this->session->flashdata('post_created')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('post_created').'</p>'?>
<?php endif;?>

<?php  if($this->session->flashdata('post_updated')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('post_updated').'</p>'?>
<?php endif;?>

<?php  if($this->session->flashdata('category_creted')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('category_created').'</p>'?>
<?php endif;?> 

<?php  if($this->session->flashdata('post_deleted')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('post_deleted').'</p>'?>
<?php endif;?> 

<?php  if($this->session->flashdata('login_failed')):?>
<?php echo '<p class="alert alert-danger">'.$this->session->flashdata('login_failed').'</p>'?>
<?php endif;?> 

<?php  if($this->session->flashdata('user_loggedin')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('user_loggedin').'</p>'?>
<?php endif;?> 

<?php  if($this->session->flashdata('user_loggedout')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('user_loggedout').'</p>'?>
<?php endif;?> 

<?php  if($this->session->flashdata('category_deleted')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('category_deleted').'</p>'?>
<?php endif;?>

这两个的输出看起来像这样：

当我删除我的header / footer.php文件时，我的其他网站标签没有css。我需要做些什么才能使主页正常

Answer 1

尝试使用导航栏折叠崩溃

包装您的ul

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="<?php echo base_url()?>pages/home">Car Sharing</a>
    </div>

    <div id="navbar" class="navbar-collapse collapse">

      <ul class="nav navbar-nav">
       <!-- -->
      </ul>
      <ul class="nav navbar-nav navbar-right">
       <!-- -->
      </ul>

    </div>

 </div>
</nav>

还要确保您的li已应用以下属性

.navbar-nav > li {
    float: left;
}

Navbar看起来不太好

1 个答案: