Question

我正在寻找一种制作两列Bootstrap（4）标签（或药片）的方法。我想要的渲染应该是这样的：

two-columns bootstrap4 tab goal

左侧是一个图标，标签右侧是标题+副标题。

有人在某个地方有片段吗？

感谢。

Answer 1

这是我的解决方案，仅使用Bootstrap 4：

我使用Nav component，插入父div和两个子div。对于父div，我使用flexbox utilities作为Bootstrap 4。

干杯:)

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap 4</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">
  <link href="style.css" rel="stylesheet">


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
    crossorigin="anonymous">
</head>

<body>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">
        <div class="d-flex flex-row align-items-center">
          <div>
            <i class="fa fa-tasks fa-2x pr-3" aria-hidden="true"></i>
          </div>
          <div>
            <h4 class="m-0 p-0">Title</h4>
            <p class="m-0 p-0">Subtitle</p>
          </div>
        </div>
      </a>
    </li>
  </ul>
</body>

</html>

两列Bootstrap 4导航标签

1 个答案: