BS网格无法正常工作

Question

在优点网格中，单击另一个分区时，一个分区的卡主体会折叠。 但是，另一个网格不会发生相同的情况（缺点）。 当单击劣势部分的一个划分时，然后再次单击劣势部分的另一个划分时，不会崩溃。 但是，这在优势部分正在发生。 我在下面包含了代码段。

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

我已将Bootstrap 4，html5用于该网页。

Answer 1

这里的问题是您在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>