如何使用引导程序修复菜单

Posted

技术标签:

【中文标题】如何使用引导程序修复菜单【英文标题】:How to fix menu using bootstrap 【发布时间】:2015-05-29 04:54:26 【问题描述】:

我使用导航栏 bootstrap3。 如您所见,问题是:

如何在不减小字体大小的情况下在同一行获得“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>

【问题讨论】:

【参考方案1】:

您可以在以下两个选项中进行选择:

    使菜单项中的文本更短。 缩小文本左右两侧的内边距。

但最终只有这么多的东西可以放在一个菜单行中。

对于选项 2,您必须更改 CSS 文件。添加类似:

.navbar-inverse .navbar-nav > li > a 
  padding: 5px 10px;

或任何适用于您的环境的变体。检查样式以了解您必须更改的内容。

【讨论】:

感谢您的回复,最好的方法是为什么将文本左右的填充变小。使用类引导程序,保持菜单响应? 这取决于你的 CSS 是什么样的。我在上面的答案中给出了一个例子。 这适用于 Firefox img11.hostingpics.net/pics/667851firefox.png 但不适用于 google chrome img11.hostingpics.net/pics/837433chrome.png 你有什么想法吗? 您的页面在 Chrome 中的宽度较小,因此您的宽菜单空间较小。可能只是规模略有不同,很难说。为什么不试试 Ahmed Ziani 的建议呢?但请尝试了解它的作用。 是的,这意味着在某些时候您将不得不折叠菜单。

以上是关于如何使用引导程序修复菜单的主要内容,如果未能解决你的问题,请参考以下文章

使用引导程序修复导航栏

如何在同一页面上使用引导程序和 jquery 下拉菜单

如何正确地连续添加到引导程序以修复移动到多行的网格系统

如何从引导程序中获取仅支持导航栏菜单而不支持整个引导程序库的 scss 文件?

CentOS7 修复MBR 扇区故障

如何制作悬停效果而不是单击引导程序 4 下拉菜单? [复制]