Bootstrap4：卡片标题和导航在一行答案

【问题标题】：Bootstrap4: card header and navigation on one rowBootstrap4：卡片标题和导航在一行
【发布时间】：2019-12-14 20:35:59
【问题描述】：

在 Boostrap 4 中，我们如何在卡片标题中定位一些导航和文本以显示在单行上？

<div class="card">
  <div class="card-header">
  Heading
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a href="#">Nav 1</a>
      </li>
      <li class="nav-item">
        <a href="#">Nav 2</a>
      </li>
      <li class="nav-item">
        <a href="#">Nav 3</a>
      </li>
    </ul>

  </div>
  <div class="card-body">
    ...      
  </div>
</div>

上面的 HTML 标记将导航呈现到标题下方的新行：

标题应左对齐，导航推到右侧。

【问题讨论】：

标签： javascript css bootstrap-4 navigation

【解决方案1】：

您也可以将标题作为列表项 (<li>) - 就像下面的代码...

li {
  margin-left: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="card">
  <div class="card-header">

    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        Heading
      </li>
      <li class="nav-item">
        <a href="#">Nav 1</a>
      </li>
      <li class="nav-item">
        <a href="#">Nav 2</a>
      </li>
      <li class="nav-item">
        <a href="#">Nav 3</a>
      </li>
    </ul>

  </div>
  <div class="card-body">
    WHATEVER... really...
  </div>
</div>

【讨论】：