2017-12-05 18 views
0

ブートストラップで折りたたみ可能な行を作成しようとしています。この列には3つの列があるように並んでいます(つまりcol-xx-4)。ブートストラップグリッドシステムに含まれる列が折り畳まれていない場合(つまり、列に3つの列がある場合)、列は、ブートストラップグリッドシステムに従って並べられます。ブートストラップ「折りたたみ」でグリッドレイアウトが破損しています

ただし、崩壊属性を追加すると、グリッドの形成が破られ、各列は完全な行をとります(のようになります)。何らかの理由で各列divが同じ行に整列する代わりに、col-xx-4にもかかわらず、であるかのように、行の幅全体を占める2つの等しい幅の余白を左右に生成しています。

コンテキストを提供するために、各列divの幅は100pxに設定され、行の幅は330pxであり、col-xx-4属性の行内の3つのdiv列すべてに十分な空きがあります。ただし、「折りたたみ」を追加すると自動的に生成されるマージンによって、列が同じ行内で水平に並べられず、縦に並べられ、それぞれが完全な行を占めるようになります。

誰も過去に同様の問題を経験しましたか? 「崩壊」を追加するとグリッド構造が破壊される理由はありますか?

+4

あなたのコードを投稿場合、それが役立つだろう – mlegg

答えて

0

は次のように試してみてください:

<div class="collapse" id="collapseExample"> 
    <div class="row"> 
    <div class="col-xx-4"></div>..... 
    </div> 
</div> 
関連する問題