如何在引导程序下拉菜单项上添加与父项相同的宽度

沙尔瓦软件

如何在引导程序下拉菜单项上添加与父项相同的宽度?

我有 这个菜单

的HTML是

<header class="navbar navbar-purple navbar-static-top bs-docs-nav" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://pos.shalvasoft.tk/"><span class="first">ShalvaSoft</span> <span class="second">POS</span></a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown langs">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                        <span class="caret"></span>
                        <span id="selectedlang"> ქართული  <i class='flag-icon flag-icon-ge'></i></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li class="hidden"><a href="#" class="lang" data-link="ge">ქართული <i class='flag-icon flag-icon-ge'></i></a></li>
                        <li><a href="#" class="lang" data-link="ru">русский <i class='flag-icon flag-icon-ru'></i></a></li>
                        <li><a href="#" class="lang" data-link="en">English <i class='flag-icon flag-icon-us'></i></a></li>    
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</header>

在CSS中,我尝试了这段代码

.navbar-purple .dropdown-menu { background-color: rgba(155, 89, 182,0.8); min-width:118px;padding-top: 0; padding-bottom: 0;}
.navbar-purple .dropdown-menu > li > a { color: #FFFFFF; text-align: right !important; padding: 3px 5px 3px 0;}

但是当父级下拉列表的文本使用格鲁吉亚文字时,什么也没有发生,因为其文本大小大于英语或俄语,因此我尝试使用jquery检查父级下拉列表的大小

var langwidth = $('.langs > a').width();
    if(langwidth > 70) {
        $('.navbar-purple .tmenu .dropdown-menu>li>a').css({
            'padding-left': (100 - langwidth + 2) + 'px',
            'padding-right': (100 - langwidth + 2) + 'px'
        });
    }

我每次都不能使用if else语句,因为该条是有歧义的,可能在将来,我需要添加新项目,因此大小不会像我需要的那样

请帮我

这是jsfiddle链接

https://jsfiddle.net/giasoft/f0zsroaj/

这是仅此菜单和1个表格的页面,因此您可以更改语言并检查其显示下拉内容的方式。

http://pos.shalvasoft.tk/login/en

多谢您日后的协助。

Umair

使用此html更新切换菜单li标签。

<li style="width:130px;" class="dropdown langs open">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
        <span class="caret"></span>
        <span id="selectedlang"> English  <i class="flag-icon flag-icon-us"></i></span>
    </a>
    <ul class="dropdown-menu" role="menu">
        <li style="width:130px;"><a href="#" class="lang" data-link="ge">ქართული <i class="flag-icon flag-icon-ge"></i></a></li>
        <li style="width:130px;"><a href="#" class="lang" data-link="ru">русский <i class="flag-icon flag-icon-ru"></i></a></li>
        <li class="hidden"><a href="#" class="lang" data-link="en">English <i class="flag-icon flag-icon-us"></i></a></li>
    </ul>
</li>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在引导程序下拉菜单项上添加与父项相同的宽度

来自分类Dev

从生成的引导程序下拉菜单中找到下拉菜单项

来自分类Dev

选择菜单项并打开新网页时如何关闭引导程序下拉菜单

来自分类Dev

如何在Tabpane引导程序上添加下拉菜单

来自分类Dev

Selenium 无法从引导程序下拉菜单中单击菜单项

来自分类Dev

如何在引导程序中的下拉项上设置宽度?

来自分类Dev

是否只有CSS才能使下拉菜单项与其父项的大小相同?

来自分类Dev

下拉菜单项的引导导航栏背景颜色

来自分类Dev

Bootstrap下拉菜单在菜单项上单击添加文本字段

来自分类Dev

引导程序调整下拉菜单宽度

来自分类Dev

如何在此下拉菜单中显示子菜单项

来自分类Dev

如何防止引导程序下拉菜单单击关闭父级下拉菜单

来自分类Dev

在下拉菜单项中添加单个图像

来自分类Dev

下拉菜单项隐藏在引导程序自定义导航栏中的主菜单后面

来自分类Dev

下拉菜单项隐藏在引导程序自定义导航栏中的主菜单后面

来自分类Dev

如何在Netsuite上添加菜单项或按钮

来自分类Dev

如何在Wordpress的菜单项上添加通知徽章?

来自分类Dev

如何获取所选的下拉菜单项

来自分类Dev

如何正确对齐/调整Bootstrap下拉菜单项?

来自分类Dev

如何使用JavaScript选择下拉菜单项

来自分类Dev

如何将下拉菜单项居中?

来自分类Dev

如何在WordPress图片库中使用jQuery选择下拉菜单项?

来自分类Dev

如何在方向更改时保留选定的微调器/下拉菜单项的状态?

来自分类Dev

我如何在引导下拉菜单中添加图标

来自分类Dev

如何以水平方式而非垂直方式显示引导导航栏的下拉菜单项?

来自分类Dev

CSS菜单:下拉菜单项的宽度受div限制

来自分类Dev

如何将下拉菜单项添加到我的水平菜单栏中?

来自分类Dev

悬停在单个菜单项而不是整个菜单上时出现下拉菜单

来自分类Dev

如何知道在引导程序中单击了哪个菜单项

Related 相关文章

  1. 1

    如何在引导程序下拉菜单项上添加与父项相同的宽度

  2. 2

    从生成的引导程序下拉菜单中找到下拉菜单项

  3. 3

    选择菜单项并打开新网页时如何关闭引导程序下拉菜单

  4. 4

    如何在Tabpane引导程序上添加下拉菜单

  5. 5

    Selenium 无法从引导程序下拉菜单中单击菜单项

  6. 6

    如何在引导程序中的下拉项上设置宽度?

  7. 7

    是否只有CSS才能使下拉菜单项与其父项的大小相同?

  8. 8

    下拉菜单项的引导导航栏背景颜色

  9. 9

    Bootstrap下拉菜单在菜单项上单击添加文本字段

  10. 10

    引导程序调整下拉菜单宽度

  11. 11

    如何在此下拉菜单中显示子菜单项

  12. 12

    如何防止引导程序下拉菜单单击关闭父级下拉菜单

  13. 13

    在下拉菜单项中添加单个图像

  14. 14

    下拉菜单项隐藏在引导程序自定义导航栏中的主菜单后面

  15. 15

    下拉菜单项隐藏在引导程序自定义导航栏中的主菜单后面

  16. 16

    如何在Netsuite上添加菜单项或按钮

  17. 17

    如何在Wordpress的菜单项上添加通知徽章?

  18. 18

    如何获取所选的下拉菜单项

  19. 19

    如何正确对齐/调整Bootstrap下拉菜单项?

  20. 20

    如何使用JavaScript选择下拉菜单项

  21. 21

    如何将下拉菜单项居中?

  22. 22

    如何在WordPress图片库中使用jQuery选择下拉菜单项?

  23. 23

    如何在方向更改时保留选定的微调器/下拉菜单项的状态?

  24. 24

    我如何在引导下拉菜单中添加图标

  25. 25

    如何以水平方式而非垂直方式显示引导导航栏的下拉菜单项?

  26. 26

    CSS菜单:下拉菜单项的宽度受div限制

  27. 27

    如何将下拉菜单项添加到我的水平菜单栏中?

  28. 28

    悬停在单个菜单项而不是整个菜单上时出现下拉菜单

  29. 29

    如何知道在引导程序中单击了哪个菜单项

热门标签

归档