問題タブ [bootstrap-4]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
gulp - Bootstrap 4. CSS の縮小により間違った結果が生成される
Bootstrap 4.0-alpha を Bower と共にインストールしました。これで、コンパイル済みの bootstrap.css と bootstrap.min.css を含む dist ディレクトリができました。開発環境では、圧縮版ではなく、展開内で縮小版を使用するようにしています。Laravel Elixir を使用してタスクを実行しています。圧縮後、いくつかのブートストラップ スタイルが変更されました。たとえば、h1 タグには "margin-top: 0.67em" があります ("margin-top: 0px" の優先度が低いために発生しています)。もちろん、完全に問題のない dist ディレクトリから事前に圧縮されたファイルを使用することもできます。しかし、それが私のミニファイヤの問題である場合、今後の開発で間違った結果につながるのではないかと心配しています.だから私の質問は、なぜそれが起こっているのですか?
navbar - xs幅で折りたたむBootstrap 4レスポンシブナビゲーションバー?
xs幅でのみハンバーガーボタンに折りたたまれますが、幅が広いと完全に表示されるブートストラップ4レスポンシブナビゲーションバーの例を見つけようとしています。
Just Worksのブートストラップ3の例がありますが、私が見つけた4の例はありません。
ブートストラップ 4 navbar の例のページには、折りたたまれたコンテンツバージョンが表示されますが、すべての幅で折りたたまれています。
その下には、.navbar-toggler などを使用して機能させる方法のヒントがあります。アル。
Bootstrap v3 で使用されているものなど、より複雑な navbar パターンについては、.navbar-toggler と組み合わせて .navbar-toggleable-* クラスを使用します。これらのクラスは、レスポンシブ ユーティリティをオーバーライドして、コンテンツの表示が意図されている場合にのみナビゲーションを表示します。
私は最小限のブートストラップの知識しか持っていないので、これを行うための認可された方法が既にある場合、フレームワークと戦いたくない解決策があります。
編集:
実際、ブートストラップ 4 のドキュメントの折りたたみ可能なコンテンツの下にあるレスポンシブ ナビゲーション バーの例は、 navbar-toggleable-xsクラスを使用して私が探していたものを正確に実行します。ウィンドウを十分に狭くしなかったため、以前は表示されませんでした。
twitter-bootstrap-4 - Bootstrap 4 フレックス ボックス グリッド
この投稿によると、Bootstrap 4 はオプトイン フレックス ボックス グリッドを提供します。
_variables.scss ファイルには、$enable-flex というブール変数があります。これを true に設定して再コンパイルすると、多くのことが起こります。
Q: Bootstrap をどのように再コンパイルしますか? 私が入力した:
コマンドラインで、Windowsコンピューターがハングしました。最後に Ctrl+C して終了する必要がありました。
html - Bootstrap v4を使用して「カード」の右側にボタンを揃える
私は Bootstrap を初めて使用し、v4 アルファ リリースを使用して飛び込もうと考えました。
次の例の「評価の配置」ボタン (ページの下部近く) を右に揃え、他のテキストを左に揃えようとしています。また、テキストとボタンを中央に垂直方向に配置する必要があります。
http://www.atlasestateagents.co.uk/mlb/landlords/services-and-fees.php
手伝ってくれますか?
javascript - Bootstrap 4 折りたたみ式カード - 途切れ途切れのアニメーション
Bootstrap 4 を使用しており、次のように .card-header と .card-block を持つカードを作成しました。
カード ヘッダーをクリックして、カード ブロックを切り替えられるようにしたいと考えています。Bootstrap の折りたたみメカニズムを使用してみました (data-toggle="collapse"
カード ヘッダーに が表示されます)。それは機能しますが、アニメーションは非常に途切れ途切れです。
理由がわかりません。これは codepen の例です。
twitter-bootstrap-4 - Bootstrap4 card-deck-wrapper と card-group
class="card-group"
と の間に見える唯一の違いclass="card-deck-wrapper"
は、card-deck-wrapper
マージンがある場合とcard-group
ない場合です。
Q: ここで何が欠けていますか? card-deck-wrapper
vsを使用する際の決定要因は何card-group
ですか?