【问题标题】:how to add same width on bootstrap dropdown menu item as parent item如何在引导下拉菜单项上添加与父项相同的宽度
【发布时间】:2015-04-09 10:38:56
【问题描述】:

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

我有

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

感谢您以后的帮助。

【问题讨论】:

  • 将父标签的宽度应用到子标签。
  • 以及如何应用父标签宽度?请在小提琴中告诉我
  • 添加样式="width:130px;"给每个
  • 你的小提琴效果不好。请重新检查你的小提琴。我用过pos.shalvasoft.tk/login/en
  • 我添加了这个标尺 .navbar-purple .dropdown-menu > li{width:130px;} 它在格鲁吉亚语中运行良好,但现在我在俄语和英语方面遇到了问题。
  • 标签: jquery html css twitter-bootstrap drop-down-menu


    【解决方案1】:

    我实际上只是将ul.dropdown-menu 标记设置为具有100%width,这将确保它具有与其父li.dropdown.langs 标记相同的宽度。正如公认的答案也说明的那样,这将比内联样式更好地放入样式标签或外部工作表中。

    <li class="dropdown langs">
        <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 style="width:100%;" class="dropdown-menu" role="menu">
            <li><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>
    

    【讨论】:

      【解决方案2】:

      只需将下拉菜单和父级“下拉切换”设置为 100% 宽度即可。这是 CSS 规则

      .dropdown-toggle, 
      .dropdown-menu {
          width: 100%;
      }
      

      【讨论】:

        【解决方案3】:

        用这个 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>
        

        【讨论】:

        • 现在一切正常。但是我可以在css中使用这个规则吗?我不需要样式规则在 html 中
        猜你喜欢
        相关资源
        最近更新 更多
        热门标签