html - Bootstrap 扩展卡导致 Bootstrap 导航栏出现问题
问题描述
我正在使用 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>解决方案
这是代码。希望它会帮助你。您没有正确应用Bootstrap 4。所以请检查一下。我已经在代码中提到了链接。如果有任何变化，请告诉我。
/* 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>推荐阅读
- c# - 如何将 c++ 可执行文件 p/Invoke 到 C#
- c# - 行数到标签并将标签数加 1
- javascript - 如果登录应用程序，如何重定向
- django - SerializerMethodField 始终返回相同的值并排除字段
- rust - 从对特征关联类型的引用中读取值时，如何解决“借用内容”错误？
- c# - 在不继承单一行为的情况下实例化预制件
- apache - 这个 Apache 环境变量语法是如何工作的？
- visual-studio - 无法使用 Visual Studion 2015 在 utasker 上运行 STM32Fxx 板
- javascript - 用时刻 JS 格式化日期以匹配
- python - Python - 将 for 循环中的所有内容打包成一个函数是个好主意吗？