水平拉伸菜单项 Bootstrap 4 Flexbox答案

【问题标题】：Stretch menu items horizontally Bootstrap 4 Flexbox水平拉伸菜单项 Bootstrap 4 Flexbox
【发布时间】：2017-06-04 16:09:15
【问题描述】：

我有一个绝对定位的块，里面有一个菜单（3 个链接）。

我的标题和菜单的标记是：

<header id="header" class="header d-flex justify-content-center align-items-end">  
  <div class="my-block">
    <div class="container row">
        <div class="col-md-8 offset-md-2">
        <nav class="nav nav-pills flex-column flex-sm-row p-2">                  
          <a href="#" class="flex-sm-fill text-sm-center nav-link">Link 1</a>               
          <a href="#" class="flex-sm-fill text-sm-center nav-link">Test link 2</a>
          <a href="#" class="flex-sm-fill text-sm-center nav-link">Another link 3</a>
        </nav>
        </div>
    </div>
  </div>
</header>

如何水平拉伸菜单项，使其完全填满我的<div class="col-md-8 offset-md-2"> 的宽度？

【问题讨论】：

与flex: 1 对nav ？ ...或/和它的孩子
成功了，谢谢！使用align-items-end，我将菜单块<div class="my-block"> 垂直对齐到<header> 的底部。但我不希望它完全处于底部。我想要菜单块和底部标题之间的一些边距？如何与 flexbox 结合使用？
padding-bottom 上的my-block 不会解决这个问题吗？ ....用这样的填充更新了我的答案
那行得通。谢谢。但是在您下面的示例中，3 个按钮没有拉伸到绿色块的宽度？以及如何使 3 个按钮具有相同的宽度？除了你的回答，我能做到。谢谢
meez，检查答案，将 flex:1 给 nav a 并证明这一点。

标签： twitter-bootstrap sass flexbox

【解决方案1】：

类似这样的：

nav {
  border: 1px solid lightgray;
  flex: 1;
  justify-content: center;
}
.my-block {
  flex: 1;
  border: 1px solid gainsboro;
  padding-bottom: 10px;
}
nav a {
  border: 1px solid green;
  flex: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<header id="header" class="header d-flex justify-content-center align-items-end">
  <div class="my-block">
    <div class="container row">
      <div class="col-md-8 offset-md-2">
        <nav class="nav nav-pills flex-column flex-sm-row p-2">
          <a href="#" class="flex-sm-fill text-sm-center nav-link">Link 1</a> 
          <a href="#" class="flex-sm-fill text-sm-center nav-link">Test link 2</a>
          <a href="#" class="flex-sm-fill text-sm-center nav-link">Another link 3</a>
        </nav>
      </div>
    </div>
  </div>
</header>

【讨论】：