問題タブ [twitter-bootstrap-4]

Bootstrap 4 を使用しており、次のように .card-header と .card-block を持つカードを作成しました。

カード ヘッダーをクリックして、カード ブロックを切り替えられるようにしたいと考えています。Bootstrap の折りたたみメカニズムを使用してみました (data-toggle="collapse"カード ヘッダーに が表示されます)。それは機能しますが、アニメーションは非常に途切れ途切れです。

理由がわかりません。これは codepen の例です。

class="card-group"と の間に見える唯一の違いclass="card-deck-wrapper"は、card-deck-wrapperマージンがある場合とcard-groupない場合です。

Q: ここで何が欠けていますか? card-deck-wrappervsを使用する際の決定要因は何card-groupですか?

ブートストラップを学んでいます。ペイントを使用して、Bootstrap 4 とその新しいフレックス サポートで作成しようとしているものの簡単なモックアップを作成しました。私の問題は、問題のペイント スケッチに見られます。Flexbox は高さを均等にするため、コメント セクションは関連セクションの末尾の下に表示されます。

コメント セクションをコンテンツ列内に配置してから、コード内で CSS flex の順序を再配置しようとしましたが、順序 CSS ルールは各行内でのみ機能するように見えます (他の行からのものを挿入することはできないようです)。 .

元のコード:

問題：

以下は、理想的なモバイルおよびデスクトップ レイアウトです。

以下に定義されているボタンがあります。

makeActiveアクションはプロパティを切り替えます。これにより、 ember がテンプレートを再レンダリングするときにshouldBeActive、ボタンのクラスが取得または失われます。.active

これはすべて素晴らしいことです...ただし、Ember が DOM を更新した後にボタンのクラスを切り替えるための bootstrap.js クリック ハンドラが起動され.active、ボタンが誤ったトグル状態に切り替えられます。

これを修正する雄弁な方法はありますか？私の唯一の考えは、私は何か愚かなことをすることができるということです...

...アクティブ状態を意図したものとは反対に効果的に設定し、ブートストラップで適切なものに切り替えます。

私はBootstrap 4を試していて、カード列の中にカードがあります:

カード列自体は、1 つの列を持つ行を持つコンテナー内にありcol-sm-12ます。

これが表示されるものです：

半分に表示されたボタン メニュー

ここで何が問題なのですか？div クラスにはdropdown-menu絶対位置があります。

ブートストラップ 4 に移行したところ、xs ボタンが極端に小さく見えなくなりました。

ブートストラップ 4 のボタンのドキュメントを見ると、極小ボタンのオプションが表示されませんか?

誰でも私のためにこれを確認できますか?

ありがとう！

ブートストラップ 4 では、タブ メニューのドロップダウンを初めてクリックすると正常に動作しますが、その後は動作しなくなります。

これがBootplyのデモです

ユーザーがバナーをスクロール'.full-width'したときに追加および削除する単純なクラスがあります。目標は、ユーザーがバナーの上または下にスクロールしたときに、<nav>を徐々に拡大または縮小することです。<nav>CSS の例からわかるように、nav にはtransitionプロパティ セットがあります。

なんらかの理由で、<nav>バーが拡張すると左側にスナップバックします。バーは右側でも正しく遷移し、バーの縮小は完全に機能します。

興味深いことに、これは Bootstrap 3 では正常に機能しているように見えますが、Bootstrap 4 の何かが原因でナビゲーション バーがスナップします。

私が見逃しているものを見た人はいますか？