Bootstrap3でナビゲーションバーの画像の横にタイトルを持ってきたい

bootstrap3でナビゲーションバーのアイコンの右横にタイトルを持ってきたいです

ついでにナビゲーションバーの高さ等の替え方もわからないので教えてください。

html
1<!--ナビゲーションバー-->
2        <nav class="navbar navbar-default">
3	<div class="container-fluid">
4		<div class="navbar-header">
5			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample3">
6				<span class="sr-only">Toggle navigation</span>
7				<span class="icon-bar"></span>
8				<span class="icon-bar"></span>
9				<span class="icon-bar"></span>
10			</button>
11			<a class="navbar-brand" href="#">
12				<img src="i3.png"style="height:20px;">	<!--アイコンの画像-->
13			</a>
14		</div>
15		
16		<div class="collapse navbar-collapse" id="navbarEexample3">
17			<ul class="nav navbar-nav">
18				<li><a href="#">メニューＡ</a></li>
19				<li class="active"><a href="#">メニューＢ</a></li>
20				<li><a href="#">メニューＣ</a></li>
21			</ul>
22			
23

こちらのコードはbootstrap3日本語リファレンスというサイトを参考にしています。
まだ勉強しだしたばかりでサイトを見たりしてもよく理解できず、皆さんに頼っている状況です。

m.ts10806

2017/12/04 08:23

調べてみたこと、やってみたことがあれば追記してください（参考にした記事などあればそれも）

s8_chu

2017/12/04 17:26

コードが途中で途切れていますが、質問者さんが記述したコードは質問文にあるコードで全てなのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

質問者さんが実現したいことは以下のように行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6    <title>タイトル</title>
7    <style type="text/css">
8        .navbar-default {
9            height: 250px;
10            min-height: 250px;
11        }
12
13        .navbar-nav > li > a,
14        .navbar-brand {
15            line-height: 250px;
16            height: inherit;
17            padding-top: 0;
18            padding-bottom: 0;
19        }
20
21        .navbar-brand {
22            display: flex;
23            align-items: center;
24        }
25
26        .navbar-brand > img {
27            margin-right: 5px;
28        }
29    </style>
30</head>
31<body>
32<nav class="navbar navbar-default">
33    <div class="container-fluid">
34        <div class="navbar-header">
35            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample3">
36                <span class="sr-only">Toggle navigation</span>
37                <span class="icon-bar"></span>
38                <span class="icon-bar"></span>
39                <span class="icon-bar"></span>
40            </button>
41            <a class="navbar-brand" href="#">
42                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=i3.png" style="height:20px;">
43                テキスト
44            </a>
45        </div>
46
47        <div class="collapse navbar-collapse" id="navbarEexample3">
48            <ul class="nav navbar-nav">
49                <li class="active">
50                    <a href="#">メニューＡ</a>
51                </li>
52                <li>
53                    <a href="#">メニューＢ</a>
54                </li>
55                <li>
56                    <a href="#">メニューＣ</a>
57                </li>
58            </ul>
59        </div>
60    </div>
61</nav>
62<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
63<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
64</body>
65</html>

投稿2017/12/04 17:27

s8_chu

総合スコア14731

質問者が掲示して頂いたコードを見ますと、

<nav class="navbar navbar-default">と、
<div class="container-fluid">と、
<div class="collapse navbar-collapse" id="navbarEexample3">

の閉じタグが見当たりませんけど･･･？

投稿2017/12/04 12:51

amaryllis

総合スコア179

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Bootstrap3でナビゲーションバーの画像の横にタイトルを持ってきたい

関連した質問