所有卡片都没有样式

Question

我正在尝试制作一个示例原型，它使用 Bootstrap 4 中的两张卡片来显示表单中的信息，并将第二个相关表单中的信息保存在第二张卡片中。现在，它看起来像这样：

Here is a JSFiddle with the code 我已经采取了在样式标签中引入特定 class 和选择器的步骤。

 <!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <style>
      div.card {
        max-height: 50%;
        min-height: 30%;
      }

      .wuformheader {
        color: white;
        padding-bottom: 0px;
        background-color: blue;
      }

      ul.nav-tabs {
        border-bottom: 0px;
      }

      div.card-header li.nav-item> a.active {
        color: black;
        background-color: white;
      }

      div.card-header li.nav-item> a {
        color: white;
      }

    </style>
    <title>Review Template</title>
  </head>

  <body>
    <div class="card">
      <div class="card-header wuformheader">
        <ul class="nav nav-tabs" id="myTabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="nav-study-tab" data-toggle="tab" href="#study" role="tab" ari-controls="study" aria-selected="true">Study Information</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-dept-tab" data-toggle="tab" href="#dept" role="tab" ari-controls="dept" aria-selected="false">Department Information</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#contact" role="tab" ari-controls="contact" aria-selected="false">Contacts</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-lab-tab" data-toggle="tab" href="#lab" role="tab" ari-controls="lab" aria-selected="false">Laboratory</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-form-approvals-tab" data-toggle="tab" href="#formapprovals" role="tab" ari-controls="formapprovals" aria-selected="false">Approvals</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <div class="tab-content" id="nav-formTabContent">
          <div class="tab-pane fade show active" id="study" role="tabpanel" aria-labelledby="nav-study-tab">
            Study Tab!
          </div>
          <div class="tab-pane fade" id="dept" role="tabpanel" aria-labelledby="nav-dept-tab">
            Department Tab!
          </div>
          <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="nav-dept-tab">
            Contacts Tab!
          </div>
          <div class="tab-pane fade" id="lab" role="tabpanel" aria-labelledby="nav-dept-tab">
            Labs!
          </div>
          <div class="tab-pane fade" id="formapprovals" role="tabpanel" aria-labelledby="nav-form-approvals-tab">
            formapprovals!
          </div>
        </div>
      </div>
    </div>
    <br/>
    <div class="card">
      <div="card-header wuformheader">
        <ul class="nav nav-tabs" id="review-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="nav-notes-tab" data-toggle="tab" href="#notes" role="tab" ari-controls="notes" aria-selected="true">Notes</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-criteria-tab" data-toggle="tab" href="#criteria" role="tab" ari-controls="criteria" aria-selected="false">Criteria</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-approvals-tab" data-toggle="tab" href="#reviewapprovals" role="tab" ari-controls="reviewapprovals" aria-selected="true">Approval</a>
          </li>
        </ul>
    </div>
    <div="card-body">
      <div class="tab-content" id="nav-reviewTabContent">
        <div class="tab-pane fade show active" id="notes" role="tabpanel" aria-labelledby="nav-notes-tab">
          Notes tab
        </div>
        <div class="tab-pane fade" id="criteria" role="tabpanel" aria-labelledby="nav-criteria-tab">
          Criteria Tab
        </div>
        <div class="tab-pane fade" id="reviewapprovals" role="tabpanel" aria-labelledby="nav-approvals-tab">
          Approvals
        </div>
      </div>
      </div>
      </div>


      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
  </body>

</html>

两张卡片需要更改什么才能具有正确的（图片顶部）样式？

Answer 1

您在 jsfiddle 的第 83 行 html 中有错别字：

<div="card-header wuformheader">

应该是：

<div class="card-header wuformheader">

您删除了单词 "class"

所有卡片都没有样式

All Cards Not Getting Styled

javascript

html

css

twitter-bootstrap

twitter-bootstrap-4