文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap4:卡片标题和导航在一行上

问Bootstrap4:卡片标题和导航在一行上
EN

Stack Overflow用户

提问于 2019-08-07 16:50:04

回答 1查看 376关注 0票数 0

在Boostrap 4中，我们如何在Card页眉中定位一些导航和文本以显示在单行上？

<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

Stack Overflow用户

发布于 2019-08-08 15:07:08

您也可以将标题作为列表项(<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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57390461

复制

相似问题

问Bootstrap4:卡片标题和导航在一行上
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap4:卡片标题和导航在一行上EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap4:卡片标题和导航在一行上
EN