問題タブ [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.

0 投票する
1 に答える
540 参照

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 ディレクトリから事前に圧縮されたファイルを使用することもできます。しかし、それが私のミニファイヤの問題である場合、今後の開発で間違った結果につながるのではないかと心配しています.だから私の質問は、なぜそれが起こっているのですか?

0 投票する
1 に答える
15964 参照

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クラスを使用して私が探していたものを正確に実行します。ウィンドウを十分に狭くしなかったため、以前は表示されませんでした。

0 投票する
4 に答える
39638 参照

html - ブートストラップ 4 の積み重ねられた折りたたみ可能なナビゲーション バー

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

コード:

スクリーンショット:

ブートストラップ4エラー

0 投票する
3 に答える
3146 参照

twitter-bootstrap-4 - Bootstrap 4 フレックス ボックス グリッド

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

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

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

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

0 投票する
2 に答える
22616 参照

html - Bootstrap v4を使用して「カード」の右側にボタンを揃える

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

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

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

手伝ってくれますか?

0 投票する
3 に答える
25709 参照

javascript - Bootstrap 4 折りたたみ式カード - 途切れ途切れのアニメーション

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

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

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

0 投票する
1 に答える
4406 参照

twitter-bootstrap-4 - Bootstrap4 card-deck-wrapper と card-group

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

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