填寫父母的剩餘寬度

Question

我有一個導航菜單，帶有可摺疊的子頁面列表。除了下拉元素也需要在同一行上有可訪問的頁面。這是我迄今爲止所擁有的。

<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

Answer 1

一個簡單的修復因爲這是要做到這一點：

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

，如果你願意，你當然可以這樣外部化到一個樣式表。

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

這使得它一直延伸到下拉擴展按鈕。

Answer 2

將顯示塊添加到您的<a>標記中，而不是顯示內嵌塊。塊元素將跨越整個寬度。