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>