手風琴類內的卡片項目不在水平位置BOOTSTRAP 4

Question

我正在嘗試水平對齊這些手風琴項目。不管什麼原因，雖然他們拒絕我使用引導程序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; 
} 

Answer 1

這個微小的CSS代碼將做的工作。

.card{float:left;} 

而且我也建議刪除手風琴第一個節目類

<div id="collapseOne" class="collapse show" ....> 

到

<div id="collapseOne" class="collapse" ...> 

Answer 2

自舉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將不能很好地工作。