Question

我有一个带有菜单的绝对定位区块（3个链接）。

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

subBinBounds = [[0, .1, .5, 1],[0, .3, .6, 1],[0, .2, .7, 1],[0, .4, .6, 1][0, .2, .5, 1]]
for i in range(5):
    cut = df[df['P'] == i+1]  # P is in {1, 5}
    subbin = pd.cut(cut['B'], subBinBounds[i], labels=range(1,4))
    cut['Q'] = cut.assign(Q=subbin.values)
    # But how do we get 'Q' back into df?

如何水平拉伸菜单项，以便它完全填满<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>的宽度？

Answer 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>

水平拉伸菜单项Bootstrap 4 Flexbox

1 个答案: