javascript - 如何使引导导航选项卡的内容仅占据一行？

Question

鉴于此bootstrap navbar

( Screenshot )

  <ul class="nav nav-tabs" style="display: inlne-block">
    <li class="nav-item" style="text-align: center;  display: inline;">
      <div>
        <a class="nav-link active show p-1" data-toggle="tab" href role="tab">1</a>
        <button type="button" class="btn btn-white" style="margin-left: 7px;">Brick 1</button>
      </div>
    </li>
    <li class="nav-item" style="text-align: center;  display: inline;">
      <a class="nav-link active show p-1" data-toggle="tab" href role="tab">2</a>
      <button type="button" class="btn btn-white" style="margin-left: 7px;">Brick 2</button>
    </li>
  </ul>

a 和 button 必须出现在一行中。 我无法将 button 放入 a 中，因为每个元素都有一个单独的事件处理程序。

我已经尝试过this answer使用 display: inline 但这不起作用。

这里是 JSFiddle https://jsfiddle.net/km7wat86/4/

Answer 1

在导航项上使用 d-flex 使其成为 display:flex...

 <ul class="nav nav-tab">
     <li class="nav-item d-flex" style="text-align: center">
        <a class="nav-link active show" data-toggle="tab" href role="tab">1</a>
        <button type="button" class="btn btn-white btn-pump-data" style="margin-left: 7px;">Pumpe 1</button>
     </li>
     <li class="nav-item d-flex" style="text-align: center">
         <a class="nav-link active show" data-toggle="tab" href role="tab">2</a>
         <button type="button" class="btn btn-white btn-pump-data" style="margin-left: 7px;">Pumpe 2</button>
     </li>
 </ul>

Codeply