如何让这两个元素并排对齐？

Question

I've tried everything I can think of, but these 2 elements just won't line up. I know there is a lot of extra CSS, but this is just a snippet of HTML from my page.

If you need the full HTML to see what I'm trying to say I can post it, but it's too long to post in the original topic.

 .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

Your structure looks like this:

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

If you add display: flex to the parent container, .row , the two immediate child div s will be aligned side-by-side.