如何讓這兩個元素並排對齊？

Question

我已經嘗試了所有我能想到的方法，但是這兩個元素不會對齊。 我知道有很多額外的 CSS，但這只是我頁面中的一小段 HTML。

如果您需要完整的 HTML 來查看我想說的內容，我可以發布它，但是在原始主題中發布太長了。

 .stripe { background-color: #79EBC6; height: 100%; width: 100%; } .navbar { margin: 0; right: 0; position: fixed; z-index: 999; background-color: #58E4B3; width: 100%; color: white; } .navbar a { color: white; background-color: #58E4B3; } .nav li { float:left; } .centered { text-align: center; } .text { padding: 1rem; } .card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; text-align: left; flex: 0 1 32%; } .cards { margin-top: 5em; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15rem; } .collapse { margin-left: 15px; } .jumbotron { width: 50%; margin: auto; background-color: #79EBC6; } .carousel { height: 25%; width: 50%; margin: auto; padding: 2em; } .tab-pane { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; background-color: white; } .display-4 { text-align: center; } .fa-check { font-size: 1.25rem; padding: 1.5rem; } .d-flex { text-align: center; margin: auto; } .section { padding: 3rem 0; } .form-row { text-align: left; } .modal-body { text-align: left; } .btn-button1 { width: 100%; background-color: #58E4B3; } .card-body { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; background-color: white; text-align: left; } .card-body .btn-success { margin-left: .5em; } body { font-family: "Asap", sans-serif; margin:10px; font-size:16px; } #demo { height:100%; position:relative; overflow:hidden; } .green{ background-color:#6fb936; } .thumb{ margin-bottom: 30px; } .page-top{ margin-top:85px; }

 <a name="tabs"></a> <section id="tabs" class="stripe"> <h2 class="mb-5 text-center">Tabs and Collapse Layouts</h2> <div class="container page-top"> <div class="row"> <div class="col-md-6"> <ul class="nav nav-tabs shadow bg-light" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="one" aria-selected="true">One</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="two" aria-selected="false">Two</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="three" aria-selected="false">Three</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <p class="p-3">Etriers jet couleur non capotes pendant epouses violets. Ca soixante cornette ai exaltait. Pile des chez dut mais agit nid hein vlan. Ton arriverent indulgence vin vie electrique vieillards. Ans nid ici arrivons lupanars vin regiment persuada. Coups je de armes crise te ou. Attendu montent or malheur battant tu il ne. Ah un closes clairs ruches. Ne en touffe jambes gaiete courbe veilla. </p> </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <p class="p-3">Voici arbre ma coups oncle abord ou en heros. Neanmoins causaient la me ameliorer attardent escadrons la fusillade il. Masse ouvre avons il ai quels sa et. Cependant ma qu frontiere seulement. Que effrayant croissent assassins son. Levee mes uns creux laque quand. Visages xv epouser emmener souleve il. </p> </div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> <p class="p-3">Societes empilait attentif eut feerique aussitot les. Nous soir vous va sous eaux au. En un ouvriers le physique quarante. Octogone tacherai foi fumantes toi paraitre car. Hagarde as en couvert ai on malheur. Minutes donnent ennemis en livides la conduit il etoffes. Peu coin voit vin pois cher. Executeurs pressaient on entrainait construits oh defilaient il decharnees. Gardait faisait escorte fatigue heureux tu humains sa. Parlaient du printemps sinistres causaient effrayant un laidement. </p> </div> </div> </div> <div id="accordion"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-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, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-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, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"> <div class="card-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, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> </div> </div> </section>

Answer 1

您的結構如下所示：

<div class="row">
  <div class="col-md-6">
    <!-- tab group -->
  </div>
  <div id="accordion">
    <!-- collapsible group -->
  </div>
</div>

如果將display: flex添加到父容器.row ，則兩個直接子div將並排對齊。