2017-09-08 62 views
-2

问题是以下 我创建一个PHP(笨)项目,并希望构建首页 视图/网页/ home.php并在这里我有这样的代码:导航栏犯规看上去很好

首页。 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:[email protected]">[email protected]</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> 

并且还我已经页眉/页脚其池莉构建,该代码是用于报头belowe 的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;?> 

和输出的这两个看起来像这样:

First Part

Second Part

当我删除我的头/ footer.php文件,我的其他的网站标签是没有CSS。 我需要做的,使首页正常

+0

试将'display:flex;'添加到'.nav'类,它将使导航为内联,如果这就是你需要的。 –

+3

什么看起来“不好”和“正常”是什么意思? – BenRoob

+0

我的意思是导航栏的大小并不好,你可以从上面的图片看到 – yimy

回答

2

尝试导航栏,垮垮来包装你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> 

也确保贵丽具有以下特性应用于

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

它现在的作品:D 谢谢 PS如何把登录和注册内联https://imgur.com/a/0aKz7 – yimy

+1

使用float:right;或将“拉右”类放入元素 – AZinkey

+0

float:在此情况下右侧不起作用:/ – yimy