border-bottomが全幅を占めていない

Question

中規模以上のデバイスではページの全幅を占めるメニューを持ちたいが、小さいデバイスではメニューアイテムを縦に表示したい。私はこれにグリッドを使用していますが、アクティブなリストアイテムの下に赤い枠線の下端（リストアイテムの下端に位置する）とホバー上にも表示したいと思います。しかし、この赤いボーダーボトムはリスト項目の全幅を占めていません。なぜなのかご存知ですか？

これは一例です：https://jsfiddle.net/9o1n8fmm/

HTML：

<div style="background-color:yellow;"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <ul class="MenuList"> 
      <li><a>Item</a></li> 
      <li><a>Item</a></li> 
      <li><a>Item</a></li> 
      <li><a>Item</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

ul{ 
    list-style:none; 
} 
.MenuList{ 
    display: flex; 
    align-content: center; 
    justify-content: space-around; 
    li{ 
    border-left: 1px solid gray; 
    padding: 20px 15px 20px 15px; 

    a{ 
     color:#fff; 
    } 
    &:first-child{ 
     border-left: 0; 
     border-bottom: 5px solid red; 
    } 
    &:hover{ 
     border-bottom: 5px solid red; 
     cursor: pointer; 
    } 
    } 
} 

Answer 1

liにflex: 1を追加 - デモ下記を参照してください：あなたはパディングを与えているので、

ul { 
 
    list-style: none; 
 
} 
 

 
.MenuList { 
 
    display: flex; 
 
    align-content: center; 
 
    justify-content: space-around; 
 
} 
 

 
.MenuList li { 
 
    border-left: 1px solid gray; 
 
    padding: 20px 15px 20px 15px; 
 
    flex: 1; 
 
} 
 

 
.MenuList li a { 
 
    color: #fff; 
 
} 
 

 
.MenuList li:first-child { 
 
    border-left: 0; 
 
    border-bottom: 5px solid red; 
 
} 
 

 
.MenuList li:hover { 
 
    border-bottom: 5px solid red; 
 
    cursor: pointer; 
 
} 
 

 

 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
 

 
<div style="background-color:yellow;"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <ul class="MenuList"> 
 
      <li><a>Item</a></li> 
 
      <li><a>Item</a></li> 
 
      <li><a>Item</a></li> 
 
      <li><a>Item</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

があなたのLIにこれを追加します。

 flex: 1 0 auto; 

か、まだ単純に：それはulにすべて利用可能なスペースを占有するため

jsFiddle