Bootstrap4：卡头和导航在一行上

Question

In Boostrap 4, how can we position some nav and text within a Card Header to display on a single row?

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

The HTML markup above renders the navigation onto a new line below the Heading:

The heading should be left-aligned, with the nav pushed to the right hand side.

Answer 1

You can place the heading as a list item also( <li> ) - like in the code below...

 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>