0

Bootstrap テーマの topnav に検索ブロックを追加すると、ログイン ボタンが「壊れた」状態になります

Bootstrap テーマを使用した ZK2.0.13。ブロックが追加されると、ユーザー ログインが新しい行に表示されます (例)新しい行

topnav が 1 行で表示されることを期待しています。

4

2 に答える 2

2

私はあなたのための答えを見つけました。私がしたことは、あなたが持っていたようにページを設定し、それを Chrome で表示することでした。このアプリには、css を試すための非常に優れた開発ツールがいくつかあります。View->Developer->Developer Tools (Mac では Cmd-Option-I) を選択します。そこから検索ボックスを右クリックし、検査を選択します。右側のパネルで、要素に影響を与えているすべての css を確認し、html がどのようにレイアウトされるかを確認できます。検索ボックスが入力グループ スタイルの div でラップされていることに気付きました。以下のコードを追加すると、あなたが望むことができることがわかりました：

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    float: right !important;
    width: 200px;
    padding-top: 6px;
}

最後の 3 つの css コマンドは、違いを生む変更です。Bootstrap テーマを修正するために、themes/BootstrapTheme/Resources/public/css/style.css に移動し、上記のコードを style.css に追加しました。テストする前に、/var/cache (prod または dev) のキャッシュ フォルダーを削除することを忘れないでください。

このソリューションに関する懸念の 1 つは、.input-group が他の場所で使用され、干渉する可能性があることです。簡単に調べたところ、検索ボックス以外で使用されていることはわかりませんでした。他の場所にある場合は、独自のテーマを作成し (難しいことではありません)、手動でコードを記述する必要があります。

于 2019-07-27T16:07:13.067 に答える