Bootstrap 扩展卡片导致 Bootstrap 导航栏出现问题

Question

我正在使用 Bootstrap 4 为网页制作可折叠卡片。但是，当我尝试将 bootstrap 导航栏与这些卡片结合使用时，导航栏显示了很多蓝色 links。此外，汉堡包菜单根本没有显示。

这是我的 CodePen 的 link。

https://codepen.io/asizemore/pen/ExaRPwL

有谁知道它为什么会这样以及如何解决它？

/* cards */

.card {
  margin: 20px 0 20px 0px;
  padding-bottom: 0px;
  background-color: #333333;
  min-height: 300px;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: 0px 8px 20px #0000007a;
}

.card-body {
  padding: 0px 15px;
  margin: 0px;
  color: white;
}

.panel-default {
  border: none;
}

.panel-group {
  position: absolute;
  bottom: -1px;
  margin-bottom: 0px;
  width: 100%;
  padding-right: 30px;
}

.panel-group .panel-heading+.panel-collapse>.panel-body,
.panel-group .panel-heading+.panel-collapse>.list-group {
  border: none;
}

.panel-group .panel {
  border-radius: 0px 0px 8px 8px;
  background-color: #e6e6e6;
}

.panel-body {
  min-height: 250px;
  overflow: scroll;
  border-radius: 0px 0px 8px 8px;
  padding: 0px 15px 10px;
}

.panel-default>.panel-heading {
  background-color: transparent;
}

.panel-heading {
  text-align: center;
  padding: -5px;
  height: 65px;
  border: none;
}

.panel-button {
  padding: 20px;
  background: #999999;
  border-radius: 100%;
  position: relative;
  top: -13px;
  z-index: 9999;
}

.panel-button .plus-minus:before {
  content: "\f067";
  font-family: "FontAwesome";
}

.panel-button[aria-expanded="true"] .plus-minus:before {
  content: "\f068";
  font-family: "FontAwesome";
}

a.panel-button:hover,
a.panel-button:focus {
  text-decoration: none;
}

a.panel-button {
  font-size: 18px;
  color: #333333;
  box-shadow: 0px 3px 7px #0000004a;
}

@media (max-width: 991px) {
  .card {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .card {
    min-height: 300px;
  }
  x .panel-body {
    max-height: 300px;
    font-size: 15px;
    padding: 0px 5px;
  }
}


/* IMAGES */

.card-img-top {
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
}

.nametext {
  margin-top: 5px;
}

.card {
  margin: 20px 0 20px 0px;
  padding-bottom: 0px;
  background-color: #333333;
  min-height: 300px;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: 0px 8px 20px #0000007a;
}

.card-body {
  padding: 0px 15px;
  margin: 0px;
  color: white;
}

.panel-default {
  border: none;
}

.panel-group {
  position: absolute;
  bottom: -1px;
  margin-bottom: 0px;
  width: 100%;
  padding-right: 30px;
}

.panel-group .panel-heading+.panel-collapse>.panel-body,
.panel-group .panel-heading+.panel-collapse>.list-group {
  border: none;
}

.panel-group .panel {
  border-radius: 0px 0px 8px 8px;
  background-color: #e6e6e6;
}

.panel-body {
  min-height: 250px;
  overflow: scroll;
  border-radius: 0px 0px 8px 8px;
  padding: 0px 15px 10px;
}

.panel-default>.panel-heading {
  background-color: transparent;
}

.panel-heading {
  text-align: center;
  padding: 0px;
  height: 65px;
  border: none;
}

.panel-button {
  padding: 20px;
  background: #999999;
  border-radius: 100%;
  position: relative;
  top: -13px;
  z-index: 9999;
}

.panel-button .plus-minus:before {
  content: "\f067";
  font-family: "FontAwesome";
}

.panel-button[aria-expanded="true"] .plus-minus:before {
  content: "\f068";
  font-family: "FontAwesome";
}

a.panel-button:hover,
a.panel-button:focus {
  text-decoration: none;
}

a.panel-button {
  font-size: 18px;
  color: #333333;
  box-shadow: 0px 3px 7px #0000004a;
}

@media (max-width: 991px) {
  .card {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .card {
    min-height: 300px;
  }
  .panel-body {
    max-height: 300px;
    font-size: 15px;
    padding: 0px 5px;
  }
}


/* IMAGES */

.card-img-top {
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
}

.nametext {
  margin-top: 5px;
}

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

<!-- NAVBAR -->
<div id="container-fluid">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </nav>

</div>


<!-- Cards -->
<div class="container">
  <!--  ROW 1   -->
  <!--         CARD 1 HECTOR -->
  <div class="col-sm-4">
    <div class="card">
      <div class="card-body">

      </div>
      <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <a class="panel-button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><span class="plus-minus"></span></a>
            <h3 class="nametext"> Hector Sr. </h3>
          </div>
          <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica. </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="https://loe.org/content/2016-01-15/t-SOTU-President_Obama_Pete_Souza.png" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

  <!--         CARD 2 ODALYS -->
  <div class="col-sm-4">
    <div class="card">
      <div class="card-body">

      </div>
      <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingTwo">
            <a class="panel-button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="plus-minus"></span></a>
            <h3 class="nametext"> Odalys Marrero </h3>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica. </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="https://s1.r29static.com/bin/entry/576/720x864,85/2179893/image.webp" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

  <!--         CARD 3 THE WORKERS -->
  <div class="col-sm-4">
    <div class="card">
      <div class="card-body">
      </div>
      <div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingThree">
            <a class="panel-button" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class="plus-minus"></span></a>

            <h3 class="nametext"> The Workers </h3>

          </div>
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica. </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="http://cdn.ipsnews.net/Library/2016/06/27232514444_bb9af40fcd_z.jpg" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

  <!--    ROW 2 -->
  <!--         CARD 4 HECTOR LUIS -->
  <div class="col-sm-4">
    <div class="card">
      <div class="card-body">

      </div>
      <div class="panel-group" id="accordion4" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFour">

            <a class="panel-button" data-toggle="collapse" data-parent="#accordion4" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><span class="plus-minus"></span></a>
            <h3 class="nametext"> Hector Luis </h3>
          </div>

          <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">

            <div class="panel-body">

              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,

            </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="https://c.stocksy.com/a/m8p500/z9/1388228.jpg?1571081157" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

  <!--         CARD 5 PEDRO HECTOR -->
  <div class="col-sm-4">
    <div class="card">
      <div class="card-body">

      </div>
      <div class="panel-group" id="accordion4" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFive">
            <a class="panel-button" data-toggle="collapse" data-parent="#accordion5" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"><span class="plus-minus"></span></a>
            <h3 class="nametext"> Pedro Hector </h3>
          </div>
          <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica. </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="https://marketplace.canva.com/MADFZPLwpN4/1/thumbnail_large/canva-young-mexican-man-MADFZPLwpN4.jpg" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

  <!--         CARD 6 HECTOR MANUEL -->
  <div class="col-sm-4">
    <div class="card">
      <div class="card-body">
      </div>
      <div class="panel-group" id="accordion6" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingSix">
            <a class="panel-button" data-toggle="collapse" data-parent="#accordion6" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"><span class="plus-minus"></span></a>

            <h3 class="nametext"> Hector Manuel </h3>

          </div>
          <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica. </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="https://i.pinimg.com/736x/85/c4/dd/85c4dd94e2bfda2f04e49bce1a729ed2.jpg" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 1

这是代码。希望它能帮助你。您没有正确申请Bootstrap 4.所以请检查一下。我在代码中提到了 link 。如果有任何变化，请告诉我。

/* cards */

.card {
  margin: 20px 0 20px 0px;
  padding-bottom: 0px;
  background-color: #333333;
  min-height: 300px;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: 0px 8px 20px #0000007a;
}

.card-body {
  padding: 0px 15px;
  margin: 0px;
  color: white;
}

.panel-default {
  border: none;
}

.panel-group {
  position: absolute;
  bottom: -1px;
  margin-bottom: 0px;
  width: 100%;
  
}

.panel-group .panel-heading+.panel-collapse>.panel-body,
.panel-group .panel-heading+.panel-collapse>.list-group {
  border: none;
}

.panel-group .panel {
  border-radius: 0px 0px 8px 8px;
  background-color: #e6e6e6;
}

.panel-body {
  min-height: 250px;
  overflow: scroll;
  border-radius: 0px 0px 8px 8px;
  padding: 0px 15px 10px;
}

.panel-default>.panel-heading {
  background-color: transparent;
}

.panel-heading {
  text-align: center;
  padding: -5px;
  height: 65px;
  border: none;
}

.panel-button {
  padding: 20px;
  background: #999999;
  border-radius: 100%;
  position: relative;
  top: -13px;
  z-index: 9999;
}

.panel-button .plus-minus:before {
  content: "\f067";
  font-family: "FontAwesome";
}

.panel-button[aria-expanded="true"] .plus-minus:before {
  content: "\f068";
  font-family: "FontAwesome";
}

a.panel-button:hover,
a.panel-button:focus {
  text-decoration: none;
}

a.panel-button {
  font-size: 18px;
  color: #333333;
  box-shadow: 0px 3px 7px #0000004a;
}

@media (max-width: 991px) {
  .card {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .card {
    min-height: 300px;
  }

  x .panel-body {
    max-height: 300px;
    font-size: 15px;
    padding: 0px 5px;
  }
}


/* IMAGES */

.card-img-top {
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
}

.nametext {
  margin-top: 5px;
}

.card {
  margin: 20px 0 20px 0px;
  padding-bottom: 0px;
  background-color: #333333;
  min-height: 300px;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: 0px 8px 20px #0000007a;
}

.card-body {
  padding: 0px 15px;
  margin: 0px;
  color: white;
}

.panel-default {
  border: none;
}

.panel-group {
  position: absolute;
  bottom: -1px;
  margin-bottom: 0px;
  width: 100%;
  padding-right: 30px;
}

.panel-group .panel-heading+.panel-collapse>.panel-body,
.panel-group .panel-heading+.panel-collapse>.list-group {
  border: none;
}

.panel-group .panel {
  border-radius: 0px 0px 8px 8px;
  background-color: #e6e6e6;
}

.panel-body {
  min-height: 250px;
  overflow: scroll;
  border-radius: 0px 0px 8px 8px;
  padding: 0px 15px 10px;
}

.panel-default>.panel-heading {
  background-color: transparent;
}

.panel-heading {
  text-align: center;
  padding: 0px;
  height: 65px;
  border: none;
}

.panel-button {
  padding: 20px;
  background: #999999;
  border-radius: 100%;
  position: relative;
  top: -13px;
  z-index: 9999;
}

.panel-button .plus-minus:before {
  content: "\f067";
  font-family: "FontAwesome";
}

.panel-button[aria-expanded="true"] .plus-minus:before {
  content: "\f068";
  font-family: "FontAwesome";
}

a.panel-button:hover,
a.panel-button:focus {
  text-decoration: none;
}

a.panel-button {
  font-size: 18px;
  color: #333333;
  box-shadow: 0px 3px 7px #0000004a;
}

@media (max-width: 991px) {
  .card {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .card {
    min-height: 300px;
  }

  .panel-body {
    max-height: 300px;
    font-size: 15px;
    padding: 0px 5px;
  }
}


/* IMAGES */

.card-img-top {
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
}

.nametext {
  margin-top: 5px;
}

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

<!-- NAVBAR -->
<div id="container-fluid">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </nav>

</div>


<!-- Cards -->
<div class="container">
  <!--  ROW 1   -->
  <!--         CARD 1 HECTOR -->
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="card">
      <div class="card-body">

      </div>
      <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <a class="panel-button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><span class="plus-minus"></span></a>
            <h3 class="nametext"> Hector Sr. </h3>
          </div>
          <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica. </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="https://loe.org/content/2016-01-15/t-SOTU-President_Obama_Pete_Souza.png" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

  <!--         CARD 2 ODALYS -->
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="card">
      <div class="card-body">

      </div>
      <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingTwo">
            <a class="panel-button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="plus-minus"></span></a>
            <h3 class="nametext"> Odalys Marrero </h3>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica. </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="https://s1.r29static.com/bin/entry/576/720x864,85/2179893/image.webp" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

  <!--         CARD 3 THE WORKERS -->
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="card">
      <div class="card-body">
      </div>
      <div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingThree">
            <a class="panel-button" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class="plus-minus"></span></a>

            <h3 class="nametext"> The Workers </h3>

          </div>
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica. </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="http://cdn.ipsnews.net/Library/2016/06/27232514444_bb9af40fcd_z.jpg" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

  <!--    ROW 2 -->
  <!--         CARD 4 HECTOR LUIS -->
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="card">
      <div class="card-body">

      </div>
      <div class="panel-group" id="accordion4" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFour">

            <a class="panel-button" data-toggle="collapse" data-parent="#accordion4" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><span class="plus-minus"></span></a>
            <h3 class="nametext"> Hector Luis </h3>
          </div>

          <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">

            <div class="panel-body">

              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,

            </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="https://c.stocksy.com/a/m8p500/z9/1388228.jpg?1571081157" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

  <!--         CARD 5 PEDRO HECTOR -->
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="card">
      <div class="card-body">

      </div>
      <div class="panel-group" id="accordion4" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFive">
            <a class="panel-button" data-toggle="collapse" data-parent="#accordion5" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"><span class="plus-minus"></span></a>
            <h3 class="nametext"> Pedro Hector </h3>
          </div>
          <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica. </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="https://marketplace.canva.com/MADFZPLwpN4/1/thumbnail_large/canva-young-mexican-man-MADFZPLwpN4.jpg" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

  <!--         CARD 6 HECTOR MANUEL -->
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="card">
      <div class="card-body">
      </div>
      <div class="panel-group" id="accordion6" role="tablist" aria-multiselectable="false">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingSix">
            <a class="panel-button" data-toggle="collapse" data-parent="#accordion6" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"><span class="plus-minus"></span></a>

            <h3 class="nametext"> Hector Manuel </h3>

          </div>
          <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica. </div>
          </div>
        </div>

      </div>
      <!-- card-body -->

      <img src="https://i.pinimg.com/736x/85/c4/dd/85c4dd94e2bfda2f04e49bce1a729ed2.jpg" class="card-img-top" alt="Responsive image">

    </div>
    <!-- card -->
  </div>

</div>
<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/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Bootstrap 扩展卡片导致 Bootstrap 导航栏出现问题

Bootstrap expanding cards causing issues with Bootstrap navbar

html

css

navbar

twitter-bootstrap