Bootstrap3 のサンプルテンプレートについての質問。

Bootstrap3にあるサイトでの紹介テンプレートを使用していますが、
http://getbootstrap.com/examples/offcanvas/

黒い横のメニューがサイトの上部にありますが、このメニューの上に隙間を空けて下に30pxほどずらしたいのですが、どこを触ればよいかわかりません。

html{} に magin-top: 30px; を追加したのですが、メニューの下から30px 下にずれてしまって、かんじんのメニューの上からはずらすことができません。　どこかで固定されているのでしょうか? わからないので教えてください。よろしくお願いします。

No.1 ベストアンサー 回答者： gao57830 回答日時： 2015/12/24 22:33

黒いメニューは、以下を参考にしてください。

top: 0;
を
top: 30px;
にすればOKです。

【黒いメニュー】bootstrap.css　行番号：4268
.navbar-fixed-top
{
　top: 0;
　border-width: 0 0 1px;
}

この回答へのお礼

ありがとうござまいす。まだ初心者、とても難しく感じています。これで２日悩んでいました。分かったので、とても嬉しいです。感謝します。すいませんが、どうやってこの場所を発見しましたか? やはりgoogle Chromeを使っているのでしょうか?　私の場合は、これを使っても分かりませんでした(笑)

お礼日時：2015/12/24 23:33

No.2 回答者： gao57830 回答日時： 2015/12/25 14:10

＞やはりgoogle Chromeを使っているのでしょうか?

Chromeを使っていますが、FireFoxやIEでも出来ます。

【以下、Chromeでの場合】
黒い横のメニューの上で右クリック、「検証」を選択。
「Elements」の部分で、
「<div id="navbar" class="collapse navbar-collapse">」が選択されています。
ただ、そこを選択した状態では実際の画面の黒のメニューがハイライトされません。
なので、その上を選択していくと
「<div class="navbar-header">」で黒いメニューがハイライトされます。
「Styles」を見ると、「margin-right」「margin-left」はあるが「top」関係がないので違うと判断する。
再度、「Elements」を探すと、
「<nav class="navbar navbar-fixed-top navbar-inverse">」が見つかる。
「Styles」を見ると、
.navbar-fixed-top
{
　top: 0;
　border-width: 0 0 1px;
}
が見つかるので、これで正しいか実際に「0」を「30」に書き換えてみる。
実際の画面で黒いメニューが下に下がるのを確認する。

といった感じです。

この回答へのお礼

ありがとうございます。私の場合は F12キーでコードをただ見ていました。
右クリックで検証できること自体知りませんでした。かなり新しい発見です。
親切に教えていただいて感謝です。

お礼日時：2015/12/28 10:59