問題タブ [bootstrap-4]

Bootstrap 4.0-alpha を Bower と共にインストールしました。これで、コンパイル済みの bootstrap.css と bootstrap.min.css を含む dist ディレクトリができました。開発環境では、圧縮版ではなく、展開内で縮小版を使用するようにしています。Laravel Elixir を使用してタスクを実行しています。圧縮後、いくつかのブートストラップ スタイルが変更されました。たとえば、h1 タグには "margin-top: 0.67em" があります ("margin-top: 0px" の優先度が低いために発生しています)。もちろん、完全に問題のない dist ディレクトリから事前に圧縮されたファイルを使用することもできます。しかし、それが私のミニファイヤの問題である場合、今後の開発で間違った結果につながるのではないかと心配しています.だから私の質問は、なぜそれが起こっているのですか?

xs幅でのみハンバーガーボタンに折りたたまれますが、幅が広いと完全に表示されるブートストラップ4レスポンシブナビゲーションバーの例を見つけようとしています。

Just Worksのブートストラップ3の例がありますが、私が見つけた4の例はありません。

ブートストラップ 4 navbar の例のページには、折りたたまれたコンテンツバージョンが表示されますが、すべての幅で折りたたまれています。

その下には、.navbar-toggler などを使用して機能させる方法のヒントがあります。アル。

Bootstrap v3 で使用されているものなど、より複雑な navbar パターンについては、.navbar-toggler と組み合わせて .navbar-toggleable-* クラスを使用します。これらのクラスは、レスポンシブ ユーティリティをオーバーライドして、コンテンツの表示が意図されている場合にのみナビゲーションを表示します。

私は最小限のブートストラップの知識しか持っていないので、これを行うための認可された方法が既にある場合、フレームワークと戦いたくない解決策があります。

編集：

実際、ブートストラップ 4 のドキュメントの折りたたみ可能なコンテンツの下にあるレスポンシブ ナビゲーション バーの例は、 navbar-toggleable-xsクラスを使用して私が探していたものを正確に実行します。ウィンドウを十分に狭くしなかったため、以前は表示されませんでした。

折りたたみ式を作成したいと思いますnavbar。すべてが機能しますが、navアイテムが本来あるべきように互いに積み重ねられていません。それらは互いに水平に並んでいます。

コード：

スクリーンショット:

この投稿によると、Bootstrap 4 はオプトイン フレックス ボックス グリッドを提供します。

_variables.scss ファイルには、$enable-flex というブール変数があります。これを true に設定して再コンパイルすると、多くのことが起こります。

Q: Bootstrap をどのように再コンパイルしますか? 私が入力した：

コマンドラインで、Windowsコンピューターがハングしました。最後に Ctrl+C して終了する必要がありました。

私は Bootstrap を初めて使用し、v4 アルファ リリースを使用して飛び込もうと考えました。

次の例の「評価の配置」ボタン (ページの下部近く) を右に揃え、他のテキストを左に揃えようとしています。また、テキストとボタンを中央に垂直方向に配置する必要があります。

http://www.atlasestateagents.co.uk/mlb/landlords/services-and-fees.php

手伝ってくれますか？

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ですか?