人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

bootstrapのExampleページのナビゲーションバーに関して
<div class="navbar navbar-fixed-top">部のソースを
そのままコピーして使用すると「Project Name」の文字が、
ナビゲーションバーの裏に隠れてしまい、かつ右によってしまいます。
(うっすら見えてはいます)

Exampleページで使用されているbootstrap.cssのVerは私が使用しているものと同じでした。

ちなみに
<div class="navbar navbar-fixed-top">を
<div class="navbar">と変更すると、
文字の位置は左に寄り、白文字になります。
ですが、バーの上部にマージンができてしまいます。

そこで、bootstrap.cssに下記のどちらかの修正を加えたいと考えますが、
CSSの経験が浅く望み通りに修正できません。

(方法1)
navbar-fixed-topクラスの文字を白、左配置になるように修正する。
(方法2)
navbarクラスの上部をtop:0状態にする

どちらの方法でもいいので解決策を教えてください。
または、そもそも文字が裏に隠れて、右に寄ってしまう原因が
予想できましたら教えてください。


●質問者: kon39392
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●200ポイント ベストアンサー

ヘタにコピペしてカスタマイズするよりも、
Download · Twitter Bootstrap
で作ったほうがはやいのでは。

docs入りをダウンロードしてdocs/examples.htmlを見ると、

<div class="navbar navbar-fixed-top">
 <div class="navbar-inner">
 <div class="container">
 <div class="nav-collapse collapse">
 <ul class="nav">
 <li class="">
 <a href="./index.html">Overview</a>

navbarはこういう構造になっていて、それぞれの要素にcssが設定されています。適当に上の階層だけコピペして、レイアウトが崩れている状態なのですかね。
無理に抜き出そうとせずに、小さい部分を改変しながら調整してみてください。


Cherenkovさんのコメント
>そもそも文字が裏に隠れて、右に寄ってしまう原因 ブラウザのウィンドウ幅を広げてみてください。広げると並んで表示されませんか?

Cherenkovさんのコメント
Customizeの「Responsive navbar」

Cherenkovさんのコメント
コメント欄のHTMLはcssやjsが抜けているのでコピペで再現できません。 https://gist.github.com/ http://jsfiddle.net/ このあたりのサービスを使うと便利です。

kon39392さんのコメント
ありがとうございます。 bootstrap.cssなど最低限のものは呼び出しているので 大丈夫と思ってたのですが、 きっとまだまだ私の理解不足なところがあるのでしょうね。 アドバイスいただいたようなものを使わせていただきます。 ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ