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

Question

我正在使用Bootstrap 4处理网页的可折叠卡。但是，当我尝试结合使用引导卡导航栏和这些卡时，导航栏会显示很多蓝色链接。此外，根本不显示汉堡菜单。

这里是我的CodePen的链接。

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

这里是代码。希望对您有帮助。您没有正确应用Bootstrap4。因此，请检查一下。我已经在代码中提到了链接。如果有任何更改，请通知我。

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