Q&A
ありがとうございます。
http://mizukazu.minibird.jp/bootstrap-singlepage1/
上記のページを参考にwebサイト作成を試みているのですが、
画像と「The SImple Groupware」という文字が立て並びになってしまいます。
サイトにあるコードをそのまま使っているのですがこれらを横並びにするにはどうすればよいでしょうか？
ご教授よろしくお願い致します。
回答3件
0
ベストアンサー
BootstrapのCSSを編集せずに使用した場合、ロゴのimgタグに対して display: block; が効いているため縦並びとなってしまいます。
修正する場合は、bootstrap.min.css（編集する部分が多い場合は、bootstrap.cssを使用した方がいいかもしれません） の .navbar-brand > img についているスタイルを外すと、意図した表示になります。
投稿2015/10/05 16:16
総合スコア91
0
bodyより上が見えないので想像ですが・・・
そのサイトを参考にした回答ですと、コードの下に「レイアウトデザイン用のCSSを作成する」という項目がありますよね？それは入力しましたか？
コピペして記事の画像と同じようにならないのでしたら、そこが原因かと思います。
コピペしたのでしたら、style.cssを読み込む文がhead内に書かれていると思いますので、style.cssファイルを作って、その中に「レイアウトデザイン用のCSSを作成する」に記載されているコードを書いて保存しましょう。
そのCSSファイルが読み込めれば問題が解決すると思います。
投稿2015/10/05 10:17
総合スコア12
0
「これだ」という原因はまだわかりませんが、とりあえずその縦に表示されているブラウザの機能で「ソースを表示」して、その画面のスクリーンショットを載せていただけますでしょうか。特に The Simple Groupware の部分がどうなっているかを見たいと思います。
投稿2015/10/05 08:35
総合スコア67
スクリーンショットを追加させていただきました。
よろしくお願いいたします。
スクショでは34行目のimg要素の直後に何かゴミでも入っていないかと思ったのですが、そこは問題なさそうですね。可能性としては低い気がしますが、スタイルシートでimg要素の表示がインラインでなくブロックになっているとか……試しにその34行目のimg要素を2つか3つ繰り返して記述したらロゴが横に並ぶか縦に並ぶか確認していただけますか? 通常なら横に並ぶはずですが、縦になったらスタイルシートの設定に問題がありそうです。(それにしても元がそうなので質問者さんのせいではありませんが、"rogo" というaltは二重の意味でひどいですね)
ありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/06 12:33