试图将代理程序引导模板添加到Laravel 5.4

我想将代理程序Bootstrap主题添加到laravel 5.4项目。他们的urle是Agency Bootstrap Theme 试图将代理程序引导模板添加到Laravel 5.4

现在我遇到的第一个问题是让Navbar叠加图片。喜欢这个。

我所得到的是这种

这是我对页面的代码。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
     <title>Agency - Start Bootstrap Theme</title> 
     <!-- Bootstrap Core CSS --> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <!-- Custom CSS --> 
     <link href="css/agency.css" rel="stylesheet"> 
     <!-- Custom Fonts --> 
     <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> 
     <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> 
     <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 
     <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'> 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
     <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body id="page-top" class="index"> 



    <!-- Navigation --> 

<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" id="mainNav"> 
    <div class="container"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
      Menu <i class="fa fa-bars"></i> 
     </button> 
     <a class="navbar-brand" href="#page-top">Start Bootstrap</a> 
     <div class="collapse navbar-collapse" id="navbarResponsive"> 
      <ul class="navbar-nav ml-auto"> 
       <li class="nav-item"> 
        <a class="nav-link" href="#services">Services</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#portfolio">Portfolio</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#about">About</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#team">Team</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

    <!-- Header --> 

<header class="masthead"> 
    <div class="container"> 
     <div class="intro-text"> 
      <div class="intro-lead-in">Welcome To Our Studio!</div> 
      <div class="intro-heading">It's Nice To Meet You</div> 
      <a href="#services" class="btn btn-xl">Tell Me More</a> 
     </div> 
    </div> 
</header> 




    <!-- jQuery --> 
<script src="js/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.min.js"></script> 

<!-- Plugin JavaScript --> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery- easing/1.3/jquery.easing.min.js"></script> 
<script src="js/classie.js"></script> 
<script src="js/cbpAnimatedHeader.js"></script> 

<!-- Contact Form JavaScript --> 
<script src="js/jqBootstrapValidation.js"></script> 
<script src="js/contact_me.js"></script> 

<!-- Custom Theme JavaScript --> 
<script src="js/agency.js"></script> 

</body>

我不知道为什么图像导航栏下方。任何帮助，将不胜感激。正如你在我的例子中看到的那样，导航栏在左边，在模板里它整齐地在右边。

来源

2017-08-05 AltBrian

在你的导航元素上，你有一个叫做“fixed-top”的类，应该是“navbar-fixed-top”。你必须遵循这种结构：

<!-- Navigation --> 
<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header page-scroll"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> 
      </button> 
      <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="hidden"> 
        <a href="#page-top"></a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#services">Services</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#portfolio">Portfolio</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#about">About</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#team">Team</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav>

来源

2017-08-05 16:41:05

遗憾的是，没有工作迭戈 – AltBrian

你验证CSS是否正确加载文件？也可以尝试删除标题部分的标头类。 –

试图将代理程序引导模板添加到Laravel 5.4

回答

相关问题