将Breadcrumbs php添加到我的Bootstrap Nav Bar

时间:2014-12-09 05:16:50

标签: php html css twitter-bootstrap twitter-bootstrap-3

我的bootstrap导航栏最初有一个带有链接的<ul>标记。我决定用面包屑代替它。因为它是用作标题的php文件,所以它是面包屑的php代码,放在<div>中使用与前一个<uL>相同的类。我还有另一个<ul>向右拉。

我遇到的问题是,我的浏览器顶部正在加载面包屑,<uL>正在加载它应该的位置。

<div class="container">
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
       
		<div class="nav navbar-nav">
		 <?php 
	     $path = $_SERVER["PHP_SELF"];
         $parts = explode('/',$path);
	     if (count($parts) < 2){
	     echo("home");
	     }
	     else {
	echo ("<a href=\"/\">home</a> &raquo; ");
	for ($i = 1; $i < count($parts); $i++)
    	{
    	if (!strstr($parts[$i],"."))
        	{
        	echo("<a href=\"");
        	for ($j = 0; $j <= $i; $j++) {echo $parts[$j]."/";};
        	echo("\">". str_replace('-', ' ', $parts[$i])."</a> » ");
        	}
    	else
        	{
       	 	$str = $parts[$i];
        	$pos = strrpos($str,".");
        	$parts[$i] = substr($str, 0, $pos);
        	echo str_replace('-', ' ', $parts[$i]);
        	};
    	};
	};  
?>
			 </div>
			 
			 <!-- <ul class="nav navbar-nav">
          <li class="active"><a href="<?php echo $tmp['t100_navlink1']; ?>"><?php echo getTemplateMessage('t100_navoption1'); ?></a></li>
          <li><a href="<?php echo $tmp['t100_navlink2']; ?>"><?php echo getTemplateMessage('t100_navoption2'); ?></a></li>
          <li><a href="<?php echo $tmp['t100_navlink3']; ?>"><?php echo getTemplateMessage('t100_navoption3'); ?></a></li>
          <li><a href="<?php echo $tmp['t100_navlink4']; ?>"><?php echo getTemplateMessage('t100_navoption4'); ?></a></li>
          <li><a href="<?php echo $tmp['t100_navlink5']; ?>"><?php echo getTemplateMessage('t100_navoption5'); ?></a></li>
        </ul>-->
        <ul class="nav navbar-nav navbar-right">
          <li><a href="<?php echo $tmp['t100_navlink6']; ?>"><?php echo getTemplateMessage('t100_navoption6'); ?></a></li>
								
					<li><?php
					if(!$currentuser) {
						if(!$tngconfig['disallowreg'])
							echo "<li><a href=\"newacctform.php\">{$text['mnuregister']}</a></li>\n";
						echo "<li><a href=\"login.php\">{$text['mnulogon']}</a></li>\n";
					}
					else {
						echo "<li><a href=\"logout.php\">{$text['mnulogout']}</a></li>\n";
					}
					?></li>
          <li><a href="<?php echo $tmp['t100_navlink7']; ?>"><?php echo getTemplateMessage('t100_navoption7'); ?></a></li>
					<li><a href="<?php echo $tmp['t100_navlink8']; ?>"><?php echo getTemplateMessage('t100_navoption8'); ?></a></li>
        </ul>
				
      </nav>
</div>	    

如果你去example要求登录使用访客和访客登录,你可以看到我的意思。除了index.php

之外,它在所有页面上方的顶部加载到顶部

(对于那些感兴趣的人,我的项目是使用Bootstrap定制我的TNG(下一代Genealogy Site Building)网站的输出php页面。)

2 个答案:

答案 0 :(得分:2)

ul中的标签得到15px的填充,这就是为什么它们在页面上略低,你可以添加一个额外的类:

<div class="nav navbar-nav breadcrumb-nav">
     <?php 
       .....
     ?>
</div>

并将其添加到您的css

.breadcrumb-nav {
   padding: 15px;
}

您还可以更改PHP以生成bootstrap breadcrumbs http://getbootstrap.com/components/#breadcrumbs

答案 1 :(得分:1)

你可以像这样使用带有php的面包屑

<ol class="breadcrumb">
   <li><a href="#">Home</a></li>
   <li><a href="#"><?php .... ?></a></li>
   <li class="active"><?php ... ?></li>
</ol>