[英]How can i center a div with the class of “collapse” (Bootstrap)?
[英]how to center a div inside a div bootstrap collapse accordion. Collapse inside collapse how to center
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<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 text-center" aria-labelledby="headingOne"
style = "width:300px;">
<div class="card-body">
<div class="card">
<div class="card-header text-center" id="headingTwo" style = "width:300px;">
<h5 class="mb-0">
<button class="btn btn-link collapsed text-center" data-
toggle="collapse" data-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo" style =
"width:300px;">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" >
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
farm-to-table, raw denim aesthetic synth nesciunt you probably
labore sustainable VHS.
</div>
</div>
</div>
</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">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of
labore sustainable VHS.
</div>
</div>
</div>
</div>
大家好,如您所见,第二次崩溃是在第一次崩溃中。 我尝试将按钮/div 的大小调整为较小的大小以进行第二次折叠,然后我尝试将其与文本中心对齐。 因此,很多地方的文本中心哈哈,但它不在中心,它仍然在最左边。 我该如何解决这个谢谢。 我正在使用最新的引导程序。 我试图为你们摘录它,但仍然不知道如何哈哈
将mx-auto
class 添加到collapseOne
<div>
<!-- Add mx-auto -->
<div id="collapseOne" class="collapse show text-center mx-auto" aria-labelledby="headingOne" style="width:300px;">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <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> <:-- Add mx-auto --> <div id="collapseOne" class="collapse show text-center mx-auto" aria-labelledby="headingOne" style="width;300px:"> <div class="card-body"> <div class="card"> <div class="card-header text-center" id="headingTwo" style="width;300px:"> <h5 class="mb-0"> <button class="btn btn-link collapsed text-center" data- toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="width;300px,"> Collapsible Group Item #2 </button> </h5> </div> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus wolf moon officia aute. non cupidatat skateboard dolor brunch. Food eiusmod, Brunch 3 wolf moon tempor. sunt aliqua put a bird on it assumenda shoreditch et, Nihil anim keffiyeh helvetica. craft beer sapiente ea proident. Ad vegan excepteur butcher vice lomo, Leggings farm-to-table. raw denim aesthetic synth nesciunt you probably labore sustainable VHS, </div> </div> </div> </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"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry wolf moon officia aute. non cupidatat skateboard dolor brunch. Food truck quinoa eiusmod, Brunch 3 wolf moon tempor. sunt aliqua put a bird on it squid single- assumenda shoreditch et, Nihil anim keffiyeh helvetica. craft beer labore wes sapiente ea proident. Ad vegan excepteur butcher vice lomo, Leggings occaecat farm-to-table. raw denim aesthetic synth nesciunt you probably haven't heard of labore sustainable VHS. </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.