[英]Card items inside of a accordion class not being horizontal positioned BOOTSTRAP 4
我正在嘗試將這些手風琴項目水平對齊。 不管出於何種原因,盡管他們拒絕了我正在使用引導程序4的方法,但我知道,如果有人可以為此提供修復,則我正在使用的方法可以在引導程序3中使用。
的jsfiddle:
https://jsfiddle.net/bhb6q929/
HTML
<div class="container">
<div class="row">
<div class="col-lg-2"> </div>
<div class="col-lg-8">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0 text-center">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Type
</a>
</h5> </div>
<div class="row">
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="col-md-4 text-center">
<button type="button" class="btn btn-default card-block" aria-label="Left Align"> <img src="http://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-laptop-4.png&r=0&g=0&b=0"> </button>
</div>
<div class="col-md-4 text-center">
<button type="button" class="btn btn-default card-block" aria-label="Left Align"> <img src="http://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-tablet-1.png&r=0&g=0&b=0"> </button>
</div>
<div class="col-md-4 text-center">
<button type="button" class="btn btn-default card-block" aria-label="Left Align"> <img src="http://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-smartphone-3.png&r=0&g=0&b=0"> </button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0 text-center">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Model
</a>
</h5> </div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block"> 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.</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0 text-center">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5> </div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block"> 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. </div>
</div>
</div>
</div>
</div>
<div class="col-lg-2"> </div>
</div>
</div>
CSS:
html {
padding: 0px;
}
body {
font-size: 17px;
line-height: 1.52947;
font-weight: 400;
letter-spacing: -0.021em;
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
background-color: white;
color: #333;
font-style: normal;
}
這個很小的CSS代碼將完成這項工作。
.card{float:left;}
而且我還建議刪除手風琴的第一個演出班
<div id="collapseOne" class="collapse show" ....>
至
<div id="collapseOne" class="collapse" ...>
對於Bootstrap 4,使用這樣的嵌套網格。
<div id="accordion" class="row no-gutters">
<div class="col">
<div class="card">..</div>
</div>
<div class="col">
<div class="card">..</div>
</div>
<div class="col">
<div class="card">..</div>
</div>
</div>
http://www.codeply.com/go/BVmPyKItT4
float:left
在打開手風琴時效果不佳。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.