1

私は最近 TB 2 をダウンロードし、それに慣れ始めました。ヒーローの例に基づいてページを作成しています。

ここで見つけたコードを使用して、ページにポップアップ フォームを追加しました。これまでのところすべて機能しているように見えますが、表示されるポップアップ ボックスが高すぎるように感じます。(少なくとも) 表示されたフォームの上部が見えるように、少し下げたいと思います。

css をチェックアウトするために firebug を使用しました。これらの行から、スタイリングがブートストラップから来ていることに気付きました（順番に）：

element.style {
    display: block;
}
.modal.fade.in {
    top: 50%;
}
.modal.fade {
    top: -25%;
    transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s;
}
.fade.in {
    opacity: 1;
}
.hide {
    display: none;
}
.modal {
    background-clip: padding-box;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    left: 50%;
    margin: -250px 0 0 -280px;
    outline: 0 none;
    position: fixed;
    top: 50%;
    width: 560px;
    z-index: 1050;
}
.fade {
    opacity: 0;
    transition: opacity 0.15s linear 0s;
}

「明らかな」ことは、フォームを表示する要素にセレクターを追加し、新しい CSS ルールを外部スタイルシートに追加するか、TB によって提供されるスタイルをオーバーライド/カスタマイズすることです。

しかし、私は自分が何をしているのかよくわからないので (私はまだ TB を学んでいます)、これまでのレイアウトを壊してしまった場合に備えて、ここで質問するのが最善だと思いました.

ポップアップフォームを下げて、フォームの上部と、おそらくその背後にある Navbar を少し見ることができるようにするための推奨される方法は何ですか (理想的には、ポップアップフォームを navbar の下に表示したいメニュー - しかし、それは複雑すぎるかもしれません)。

4

1 に答える 1

3

コードをいじくり回すことを恐れないでください。自分のルールを取り、下部に表示するだけです。後でいつでも削除できます。ブートストラップCSSコード自体を編集しないでください。最も低いコードが前のコードをオーバーライドします。

そして、firebugとそのスタイルと計算されたスタイルのパネルを使用してテストします。

于 2012-11-13T17:50:52.453 に答える