带引导程序的导航栏答案

【问题标题】：Navigation Bar with Bootstrap带引导程序的导航栏
【发布时间】：2015-08-25 05:08:44
【问题描述】：

我想用引导程序在我的导航栏上制作“块颜色”。像这样：

我为此使用了导航药片。但我什么也没有。块颜色未显示。这是我的代码：

<nav class="navbar navbar-default">
  <div class="container-fluid">
      <ul class="nav nav-pills">
        <li><a href="<?php echo base_url(); ?>home">Home</a></li>
        <li><a href="<?php echo base_url(); ?>paketsatu">Service</a></li>
		<li><a href="<?php echo base_url(); ?>gallery">Gallery</a></li>
        <li><a href="<?php echo base_url(); ?>contact">Contact</a></li>
        <li><a href="<?php echo base_url(); ?>profile">About us</a></li>
      </ul>
    </div>
</nav>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

使用以下 CSS

.navbar.navbar-default {overflow: hidden; padding: 10px; background-color: #fff; border: 0;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav nav-pills">
      <li><a href="<?php echo base_url(); ?>home">Home</a></li>
      <li><a href="<?php echo base_url(); ?>paketsatu">Service</a></li>
      <li><a href="<?php echo base_url(); ?>gallery">Gallery</a></li>
      <li><a href="<?php echo base_url(); ?>contact">Contact</a></li>
      <li><a href="<?php echo base_url(); ?>profile">About us</a></li>
    </ul>
  </div>
</nav>

【讨论】：

【解决方案2】：

使用navbar-nav 代替导航药丸

【讨论】：