BS 网格工作不相同
BS grid not working identically
在优势格子中，当点击另一个分区时，一个分区的卡体会折叠。
然而，另一个网格并没有发生同样的情况（缺点）。
当我们单击劣势部分的一个分区时，当我们再次单击劣势部分的另一个分区时，它不会被折叠。
然而，这是在优势部分发生的。
我在下面包含了代码片段。
<section id="explore-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>
<p class="text-center bg-dark py-2" id="advantages">Advantages</p>
</h3>
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header" id="heading1">
<h5 class="mb-0">
<div href="#collapse1" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Reduces iron levels
</div>
</h5>
</div>
<div id="collapse1" class="collapse text-justify">
<div class="card-body">
Iron is a mineral that the body needs to produce red blood cells.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<h5 class="mb-0">
<div href="#collapse2" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Identifies adverse health effects
</div>
</h5>
</div>
<div id="collapse2" class="collapse text-justify">
<div class="card-body">
Each person who donates blood completes a simply physical examination and short blood test before giving blood.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<h5 class="mb-0">
<div href="#collapse3" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i>Helps people feel good about themselves
</div>
</h5>
</div>
<div id="collapse3" class="collapse text-justify">
<div class="card-body">
Donating blood has the power to impact up to three people who need the blood to survive.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading4">
<h5 class="mb-0">
<div href="#collapse4" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i>Burns calories
</div>
</h5>
</div>
<div id="collapse4" class="collapse text-justify">
<div class="card-body">
Donating blood burns up to 650 calories per donation, according to the St.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h3>
<p class="text-center bg-dark py-2" id="disadvantages">Disadvantages</p>
</h3>
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<div href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Pain
</div>
</h5>
</div>
<div id="collapseOne" class="collapse text-justify">
<div class="card-body">
The site of the needle's insertion may be painful.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<div href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Weakness
</div>
</h5>
</div>
<div id="collapseTwo" class="collapse text-justify">
<div class="card-body">
After donating a pint of blood, a person may feel faint or dizzy, and these symptoms are common.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<div href="#collapseThree" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Dizziness, Lightheadedness, and Nausea
</div>
</h5>
</div>
<div id="collapseThree" class="collapse text-justify">
<div class="card-body">
After your donation is complete, you will be told to sit in an observation area for 15 minutes.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<div href="#collapseFour" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i>Bruising
</div>
</h5>
</div>
<div id="collapseFour" class="collapse text-justify">
<div class="card-body">
When you donate blood, you sit or lie on a reclining chair with your arm extended on an armrest.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
网页我用了bootstrap4，html5
这里的问题是您在 html 中使用了相同的 ID accordion 两次。
你必须更换那个。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section id="explore-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>
<p class="text-center bg-dark py-2" id="advantages">Advantages</p>
</h3>
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header" id="heading1">
<h5 class="mb-0">
<div href="#collapse1" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Reduces iron levels
</div>
</h5>
</div>
<div id="collapse1" class="collapse text-justify">
<div class="card-body">
Iron is a mineral that the body needs to produce red blood cells.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<h5 class="mb-0">
<div href="#collapse2" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Identifies adverse health effects
</div>
</h5>
</div>
<div id="collapse2" class="collapse text-justify">
<div class="card-body">
Each person who donates blood completes a simply physical examination and short blood test before giving blood.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<h5 class="mb-0">
<div href="#collapse3" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i>Helps people feel good about themselves
</div>
</h5>
</div>
<div id="collapse3" class="collapse text-justify">
<div class="card-body">
Donating blood has the power to impact up to three people who need the blood to survive.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading4">
<h5 class="mb-0">
<div href="#collapse4" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i>Burns calories
</div>
</h5>
</div>
<div id="collapse4" class="collapse text-justify">
<div class="card-body">
Donating blood burns up to 650 calories per donation, according to the St.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h3>
<p class="text-center bg-dark py-2" id="disadvantages">Disadvantages</p>
</h3>
<div id="accordion2" role="tablist">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<div href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">
<i class="fa fa-chevron-down float-right"></i> Pain
</div>
</h5>
</div>
<div id="collapseOne" class="collapse text-justify">
<div class="card-body">
The site of the needle's insertion may be painful.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<div href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">
<i class="fa fa-chevron-down float-right"></i> Weakness
</div>
</h5>
</div>
<div id="collapseTwo" class="collapse text-justify">
<div class="card-body">
After donating a pint of blood, a person may feel faint or dizzy, and these symptoms are common.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<div href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">
<i class="fa fa-chevron-down float-right"></i> Dizziness, Lightheadedness, and Nausea
</div>
</h5>
</div>
<div id="collapseThree" class="collapse text-justify">
<div class="card-body">
After your donation is complete, you will be told to sit in an observation area for 15 minutes.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<div href="#collapseFour" data-toggle="collapse" data-parent="#accordion2">
<i class="fa fa-chevron-down float-right"></i>Bruising
</div>
</h5>
</div>
<div id="collapseFour" class="collapse text-justify">
<div class="card-body">
When you donate blood, you sit or lie on a reclining chair with your arm extended on an armrest.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
在优势格子中，当点击另一个分区时，一个分区的卡体会折叠。 然而，另一个网格并没有发生同样的情况（缺点）。 当我们单击劣势部分的一个分区时，当我们再次单击劣势部分的另一个分区时，它不会被折叠。 然而，这是在优势部分发生的。 我在下面包含了代码片段。
<section id="explore-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>
<p class="text-center bg-dark py-2" id="advantages">Advantages</p>
</h3>
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header" id="heading1">
<h5 class="mb-0">
<div href="#collapse1" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Reduces iron levels
</div>
</h5>
</div>
<div id="collapse1" class="collapse text-justify">
<div class="card-body">
Iron is a mineral that the body needs to produce red blood cells.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<h5 class="mb-0">
<div href="#collapse2" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Identifies adverse health effects
</div>
</h5>
</div>
<div id="collapse2" class="collapse text-justify">
<div class="card-body">
Each person who donates blood completes a simply physical examination and short blood test before giving blood.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<h5 class="mb-0">
<div href="#collapse3" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i>Helps people feel good about themselves
</div>
</h5>
</div>
<div id="collapse3" class="collapse text-justify">
<div class="card-body">
Donating blood has the power to impact up to three people who need the blood to survive.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading4">
<h5 class="mb-0">
<div href="#collapse4" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i>Burns calories
</div>
</h5>
</div>
<div id="collapse4" class="collapse text-justify">
<div class="card-body">
Donating blood burns up to 650 calories per donation, according to the St.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h3>
<p class="text-center bg-dark py-2" id="disadvantages">Disadvantages</p>
</h3>
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<div href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Pain
</div>
</h5>
</div>
<div id="collapseOne" class="collapse text-justify">
<div class="card-body">
The site of the needle's insertion may be painful.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<div href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Weakness
</div>
</h5>
</div>
<div id="collapseTwo" class="collapse text-justify">
<div class="card-body">
After donating a pint of blood, a person may feel faint or dizzy, and these symptoms are common.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<div href="#collapseThree" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Dizziness, Lightheadedness, and Nausea
</div>
</h5>
</div>
<div id="collapseThree" class="collapse text-justify">
<div class="card-body">
After your donation is complete, you will be told to sit in an observation area for 15 minutes.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<div href="#collapseFour" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i>Bruising
</div>
</h5>
</div>
<div id="collapseFour" class="collapse text-justify">
<div class="card-body">
When you donate blood, you sit or lie on a reclining chair with your arm extended on an armrest.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
网页我用了bootstrap4，html5
这里的问题是您在 html 中使用了相同的 ID accordion 两次。
你必须更换那个。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section id="explore-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>
<p class="text-center bg-dark py-2" id="advantages">Advantages</p>
</h3>
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header" id="heading1">
<h5 class="mb-0">
<div href="#collapse1" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Reduces iron levels
</div>
</h5>
</div>
<div id="collapse1" class="collapse text-justify">
<div class="card-body">
Iron is a mineral that the body needs to produce red blood cells.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<h5 class="mb-0">
<div href="#collapse2" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i> Identifies adverse health effects
</div>
</h5>
</div>
<div id="collapse2" class="collapse text-justify">
<div class="card-body">
Each person who donates blood completes a simply physical examination and short blood test before giving blood.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<h5 class="mb-0">
<div href="#collapse3" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i>Helps people feel good about themselves
</div>
</h5>
</div>
<div id="collapse3" class="collapse text-justify">
<div class="card-body">
Donating blood has the power to impact up to three people who need the blood to survive.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading4">
<h5 class="mb-0">
<div href="#collapse4" data-toggle="collapse" data-parent="#accordion">
<i class="fa fa-chevron-down float-right"></i>Burns calories
</div>
</h5>
</div>
<div id="collapse4" class="collapse text-justify">
<div class="card-body">
Donating blood burns up to 650 calories per donation, according to the St.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h3>
<p class="text-center bg-dark py-2" id="disadvantages">Disadvantages</p>
</h3>
<div id="accordion2" role="tablist">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<div href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">
<i class="fa fa-chevron-down float-right"></i> Pain
</div>
</h5>
</div>
<div id="collapseOne" class="collapse text-justify">
<div class="card-body">
The site of the needle's insertion may be painful.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<div href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">
<i class="fa fa-chevron-down float-right"></i> Weakness
</div>
</h5>
</div>
<div id="collapseTwo" class="collapse text-justify">
<div class="card-body">
After donating a pint of blood, a person may feel faint or dizzy, and these symptoms are common.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<div href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">
<i class="fa fa-chevron-down float-right"></i> Dizziness, Lightheadedness, and Nausea
</div>
</h5>
</div>
<div id="collapseThree" class="collapse text-justify">
<div class="card-body">
After your donation is complete, you will be told to sit in an observation area for 15 minutes.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<div href="#collapseFour" data-toggle="collapse" data-parent="#accordion2">
<i class="fa fa-chevron-down float-right"></i>Bruising
</div>
</h5>
</div>
<div id="collapseFour" class="collapse text-justify">
<div class="card-body">
When you donate blood, you sit or lie on a reclining chair with your arm extended on an armrest.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>