填写父母的剩余宽度

我有一个导航菜单，带有可折叠的子页面列表。除了下拉元素也需要在同一行上有可访问的页面。这是我迄今为止所拥有的。填写父母的剩余宽度

<div class="container-fluid"> 
       <div class="row"> 
        <div class="col-sm-3 col-lg-2"> 
         <div class="navbar navbar-default navbar-fixed-side"> 
          <ul class="nav" id="side-menu-0"> 
           <li id="menu-template" class="nav"> 
            <a href="index.html"><i class="fa fa-dashboard fa-fw"></i>Dashboard</a> 
           </li> 
           <li id="menu-template-top" class="nav" role="menu"> 
            <a href="#" style="display:inline-block;" class="nav">Google</a> 
            <a href="#menu-template-top-sub" data-toggle="collapse" class="nav navbar-nav pull-right" style="display:inline-block;"><span class="caret"></span></a> 
              <ul id="menu-template-top-sub" class="collapse nav nav-second-level"> 
               <li class="nav"> 
                <a href="flot.html">Flot Charts</a> 
               </li> 
               <li class="nav"> 
                <a href="morris.html">Morris.js Charts</a> 
               </li> 
              </ul> 
            <!-- /.nav-second-level --> 
           </li> 
          </ul> 
         </div> 
        </div>

这里是工作小提琴，所以你可以看到我正在尝试做什么。我希望“Google”的链接向右延伸，就像“Dashboard”链接所能做的那样。 Working Fiddle

来源

2016-11-07 christopher clark

一个简单的修复因为这是要做到这一点：

<a href="#" style="display:inline-block; width:calc(100% - 40px);" class="nav">Google</a>

，如果你愿意，你当然可以这样外部化到一个样式表。

calc(100% - 40px)中的40px是您的dropdown插入宽度。

这使得它一直延伸到下拉扩展按钮。

来源

2016-11-07 21:30:53 simnys

将显示块添加到您的<a>标记中，而不是显示内嵌块。块元素将跨越整个宽度。

来源

2016-11-07 20:55:20

这有很多不希望的效果 –

填写父母的剩余宽度

回答

相关问题