如何使用 bootstrap 修复菜单
How to fix menu using bootstrap
我使用导航栏引导程序 3。
如您所见,问题是:
如何在不减小字体大小的情况下在同一行上获得 "Recherche"
这是我的代码:
<nav class="navbar navbar-default navbar-static-top navbar-custom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">...</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<?php $idCategorie=$this->idCategorie;?>
<!-- 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">
<li <?php if($idCategorie == '5') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/5">Terminal de paiement <span class="sr-only">(current)</span></a></li>
<li <?php if($idCategorie == '6') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/6">Application de caisse</a></li>
<li <?php if($idCategorie == '7') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/7">Logiciel de gestion</a></li>
<li <?php if($idCategorie == '8') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/8">Opérations bancaires</a></li>
<li <?php if($idCategorie == '9') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/9">Equipements</a></li>
<?php if($acces){?>
<li <?php if($idCategorie == '11') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/client/index">Informations clients</a></li>
<?php }?>
<li class="<?php if($idCategorie == '10') echo 'active'; ?> coloCell1" ><a href="<?php echo $this->baseUrl() ?>/index/page/id/10">Difficultés pour un encaissement CB</a></li>
<!-- <li class="<?php //if($idCategorie == '11') echo 'active'; ?> coloCell4" ><a href="<?php //echo $this->baseUrl() ?>/index/page/id/11">Informations client </a></li>-->
<li class="<?php if($idCategorie == 'iframe') echo 'active'; ?> coloCell2" ><a href="<?php echo $this->baseUrl() ?>/index/page/id/iframe">Recherche</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
您可以在这两个选项中进行选择:
- 缩短菜单项中的文本。
- 缩小文本左右两侧的内边距。
但最终只有这么多内容可以放在一个菜单行中。
对于选项 2,您必须更改 CSS 文件。添加如下内容:
.navbar-inverse .navbar-nav > li > a {
padding: 5px 10px;
}
或适用于您的环境的任何变体。检查样式以查看必须更改的内容。
我使用导航栏引导程序 3。
如您所见,问题是:
如何在不减小字体大小的情况下在同一行上获得 "Recherche"
这是我的代码:
<nav class="navbar navbar-default navbar-static-top navbar-custom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">...</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<?php $idCategorie=$this->idCategorie;?>
<!-- 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">
<li <?php if($idCategorie == '5') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/5">Terminal de paiement <span class="sr-only">(current)</span></a></li>
<li <?php if($idCategorie == '6') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/6">Application de caisse</a></li>
<li <?php if($idCategorie == '7') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/7">Logiciel de gestion</a></li>
<li <?php if($idCategorie == '8') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/8">Opérations bancaires</a></li>
<li <?php if($idCategorie == '9') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/9">Equipements</a></li>
<?php if($acces){?>
<li <?php if($idCategorie == '11') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/client/index">Informations clients</a></li>
<?php }?>
<li class="<?php if($idCategorie == '10') echo 'active'; ?> coloCell1" ><a href="<?php echo $this->baseUrl() ?>/index/page/id/10">Difficultés pour un encaissement CB</a></li>
<!-- <li class="<?php //if($idCategorie == '11') echo 'active'; ?> coloCell4" ><a href="<?php //echo $this->baseUrl() ?>/index/page/id/11">Informations client </a></li>-->
<li class="<?php if($idCategorie == 'iframe') echo 'active'; ?> coloCell2" ><a href="<?php echo $this->baseUrl() ?>/index/page/id/iframe">Recherche</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
您可以在这两个选项中进行选择:
- 缩短菜单项中的文本。
- 缩小文本左右两侧的内边距。
但最终只有这么多内容可以放在一个菜单行中。
对于选项 2,您必须更改 CSS 文件。添加如下内容:
.navbar-inverse .navbar-nav > li > a {
padding: 5px 10px;
}
或适用于您的环境的任何变体。检查样式以查看必须更改的内容。