問題タブ [twitter-bootstrap-4]

すぐに使用できるものが私のテーマに非常によく適合するため、ブートストラップ 4 のナビゲーション タブに独自のスタイルを取り入れようとしました。

思い通りの見た目になっていますが、タブの上にカーソルを合わせると、nav-tabs セクションの border-bottom が約 1px 下に移動します。マージンやパディングなどを操作してみましたが、それをやめる方法がわかりません。

誰かがここで助けてくれますか?

CSS

jsfiddle

そのため、Bootstrap v4 では、カードのグループを作成するカード デッキ ( http://v4-alpha.getbootstrap.com/components/card/#decks ) の新しい機能があり、その高さは最も高いコンテンツに応じて等しくなります。グループで。

列の数は、グループ内の card-div の数に基づいているようです。ビューポートに基づいて列数を変更する方法はありますか? 例えば大幅で4段・カード幅、中幅で2幅、小幅で1段？

現在、544px 未満になるまで、同じ数の列/カード幅のままです。544px 以上ではdisplay: table-cell、screen (min-width: 544px)ルールが適用されます。

CSS のみを変更して、ビューポートに基づいてカードの列数を変える方法はありますか?

編集 - IE をサポートしているため、flex / flexbox を使用しないことを検討しています

http://codepen.io/jpost-vlocity/full/PNEKKy/ の 4 列/カード幅および 3 列/カード幅の Codepen の例

プロジェクトにBootstrap 4石積みカードレイアウトを使用していますが、そのプロジェクト内に<select>はカスタムスタイルがあります。カスタム スタイルの一部は、CSS を使用して作成されたキャレット:afterです。ブラウザーが異なれば結果も異なります。誰かが解決策を持っている場合に備えて、ここに投稿したいと思いました。これが Bootstrap の問題なのか CSS 仕様の問題なのかはわかりません。

• Chrome Canary: すべて問題ないようです
• Chrome: 最初の列は問題ないように見えますが、最初の列以降の列は悪く見えます。モバイルに移動しない限り (ここでは 1 列のみに設定しています)、そこには問題なく表示されます。複数の列がある場合のみです。
• Firefox: すべて問題ありません
• Safari: 最初の列が表示されますが、最初の列の後の列はキャレットとテキストが表示されません。

Codepen のリンクは次のとおりです: http://codepen.io/derekshull/pen/GZQaRY

サブリストに適切なクラスが適用されているにもかかわらず、ブートストラップ ドロップダウン メニューを実装しようとしていますが、ブートストラップに通常適用されるフォーマットとパディングが失われています。

次のようにブートストラップ 4.0.0-alpha.2 を使用しています。

サイトの主要ページ (ランディングなど) のページ ウェイトを照会してレポートする管理ページを作成しています。

Bootstrap 4 が近いので、これを使用してレイアウトを作成しましたが、これには満足しています。ただし、行ごとに、セル内のテキストは垂直方向に配置されません。私は単純な右揃えを行うことができます:

しかし、縦にも並べたいです。Bootstrap 4 は flexbox を使用していると思います。フレックスを使用してセル内で垂直方向のテキスト配置を行う方法はありますか? 私の例はCodePenにあります

私の目標は、この領域を可能な限りレスポンシブにすることです。非常に大きなビューポートでは見栄えがしますが、縮小し始めると、例:ビューポートが ~930px最初のスクリーンショットのように写真を完全に並べることができなくなります。

写真領域を にしようとしましたbackground-size: coverが、その解決策は、小さなビューポートに到達するときに画像の端を切り取るだけです (これはオプションではありません)。

2 番目の問題はモバイル ビューポートにあります。これら 2 つのブロックを重ねる必要があります。ただし、最初の問題が解決された後、その部分を理解できると確信しています。

前もって感謝します！

Angualr js 2 のブートストラップ 4 タイプヘッド コントロールに ngControl フォーム検証を追加しようとしています。コードは次のとおりです。

ウェブサイトがこの-lg-サイズになると、次のようになります。

望ましい結果:

しかし、私はこれで終わるだけです：

実結果：

私が望むことは可能ですか、それともブートストラップに最適な設計ではありませんか?

https://jsfiddle.net/clankill3r/0o1mz65n/

スペースがなくなったときに合計して次の行に分割するのではなく、メニューに行を持たせたくありません。

例：

今私が持っています：

に変更しdisplay: inlineても効果はありません。

https://jsfiddle.net/clankill3r/gguc1nub/

ブートストラップ メニューがあります。折りたたまれている場合はページの名前を付けたい、開いている場合はメニューに名前を付けたい。

今のところ、「予告編を見る」という名前を付けました（そのページのどこにあるかを想定してください）。ボタンをクリックすると、タイトルの変更は機能しますが、最初の後にのみ機能します。何故ですか？

そして、私のアプローチは良いアプローチですか？便宜上、 jsfiddle を次に示します。