アコーディオンクラス内のカードアイテムが水平に配置されていないBOOTSTRAP 4

これらのアコーディオンアイテムを水平に整列しようとしています。私がブートストラップ4を使用しているのを拒否しても何らかの理由で私は使用している方法がブートストラップ3で動作することを知っています。アコーディオンクラス内のカードアイテムが水平に配置されていないBOOTSTRAP 4

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; 
}

出典

2017-03-16 cosmichero2025

この小さなCSSコードは仕事を行います。

.card{float:left;}

そして、私はまた、ブートストラップ4について

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

出典

2017-03-16 18:07:18

私はクラスとすべての行と列を削除し、CSSを追加する前にリフレッシュして修正しました。それであなたのCSSを追加しました。それが壊れました。なぜならXDは理由を知らないのですが、 D – cosmichero2025

余分なCSSがない理由はありません。ブートストラップ4には '.float-left'クラスがあります。 – ZimSystem

Hehe、私はnoobieです。このジムの男はかなりよく知っている。 –

にアコーディオン最初のショークラス

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

を削除する提案は、このようなネストされたグリッドを使用します。

<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アコーディオンが開いているときに、非常にうまく機能しません。

出典

2017-03-16 18:30:03 ZimSystem

ジム、それはちょうど私ですが、コードリーリンクが読み込まれていない、いくつかのブラウザで試して、無限に画面を読み込む3つのポイントに残ります。 – Syden

@syden - 今は変わっていますか？ – ZimSystem

悲しいことに、しかし、ありがたいですが、非常に変わったかもしれません。それは私だけです。私は明日オフィスでそれを試さなければなりません。コンソールは次のようにスローされます：https://imgur.com/a/VSFKx – Syden

アコーディオンクラス内のカードアイテムが水平に配置されていないBOOTSTRAP 4

答えて

関連する問題