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

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

ただいまの
回答率

90.48%

  • Bootstrap

    1004questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Bootstrapのナビゲーションの使い方で分からない事があります。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 241

a0841_1974

score 15

いつもお世話になっております。

Bootstrap3の使用方法で分からない事があります。
ご存知の方がいらっしゃれば、教えて頂けますでしょうか。

【ご質問】
以下のhtmlの記述でご確認したいことがあります。
以下の記述ですと、
テスト1、テスト2、テスト3、テスト4、送信
のように横に1行で表示されます。

これをスマホなど横幅の表示が狭いブラウザで表示すると、
テスト1
テスト2
テスト3
テスト4
送信
のように各行に分かれて表示されます。

スマホの場合でも
テスト1、テスト2、テスト3、テスト4、送信
のように横に1行で表示したいのですが、
どのようにhtmlを記述すれば表示されるのでしょうか。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>入力</title>
        <link rel="stylesheet" type="text/css" href="/apri1/lib/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="/apri1/css/common.css">
      </head>

  <body style="padding-top: 30px;">
    <div class="sitewrapper container-fluid">
          <nav class="navbar navbar-default navbar-fixed-top">
            <div class="navbar-header"></div>
              <ul class="nav navbar-nav">
                <li class="active"><a href="#test1" data-toggle="pill">テスト1</a>
                <li><a href="#test2" data-toggle="pill">テスト2</a>
                <li><a href="#test3" data-toggle="pill">テスト3</a>
                <li><a href="#test4" data-toggle="pill">テスト4</a>
              </ul>
              <button type="button" class="btn btn-primary navbar-btn">送信</button>
          </nav>
        <h2 class="page-header">入力</h2>

        <form name="form" id="form" class="" action="commit" method="post">
          <div class="tab-content">
            <div class="tab-pane active" id="test1">
              a<BR>
              a<BR>
              a<BR>
            </div>
            <div class="tab-pane" id="test2">
              b<BR>
              b<BR>
              b<BR>
            </div>
            <div class="tab-pane" id="test3">
              c<BR>
              c<BR>
              c<BR>
            </div>
            <div class="tab-pane" id="test4">
              d<BR>
              d<BR>
              d<BR>
            </div>
          </div>
        </form>

    </div>
  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="/apri1/lib/jquery/jquery-3.2.1.min.js"></script>
  <script src="/apri1/lib/bootstrap/js/bootstrap.min.js"></script>
  <script>

  </script>
</body>
</html>

以上です。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

質問者さんの実現したいことは以下のように行えると思います。なお、質問文に書かれていないcommon.cssのコードは考慮していません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>入力</title>
    <style>
        .nav {
            display: flex;
            flex-wrap: wrap;
        }

        .navbar-nav {
            margin: 0;
        }

        .navbar-nav > li > a {
            padding-top: 15px;
            padding-bottom: 15px;
        }
    </style>
</head>
<body style="padding-top: 30px;">
<div class="sitewrapper container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header"></div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#test1" data-toggle="pill">テスト1</a></li>
            <li><a href="#test2" data-toggle="pill">テスト2</a></li>
            <li><a href="#test3" data-toggle="pill">テスト3</a></li>
            <li><a href="#test4" data-toggle="pill">テスト4</a></li>
            <li>
                <button type="button" class="btn btn-primary navbar-btn">送信</button>
            </li>
        </ul>
    </nav>
    <h2 class="page-header">入力</h2>
    <form name="form" id="form" class="" action="commit" method="post">
        <div class="tab-content">
            <div class="tab-pane active" id="test1">
                a<BR>
                a<BR>
                a<BR>
            </div>
            <div class="tab-pane" id="test2">
                b<BR>
                b<BR>
                b<BR>
            </div>
            <div class="tab-pane" id="test3">
                c<BR>
                c<BR>
                c<BR>
            </div>
            <div class="tab-pane" id="test4">
                d<BR>
                d<BR>
                d<BR>
            </div>
        </div>
    </form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

 追記

コメント欄の②は、以下のように行うことができると思いますが、いかがでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>入力</title>
    <style>
        .nav {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
        }

        .navbar-nav {
            margin: 0;
        }

        .navbar-nav > li {
            flex: 0 1 33.3%;
        }

        .navbar-nav > li > a {
            padding-top: 15px;
            padding-bottom: 15px;
        }
    </style>
</head>
<body style="padding-top: 100px;">
<div class="sitewrapper container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header"></div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#test1" data-toggle="pill">テスト1</a></li>
            <li><a href="#test2" data-toggle="pill">テスト2</a></li>
            <li><a href="#test3" data-toggle="pill">テスト3</a></li>
            <li><a href="#test4" data-toggle="pill">テスト4</a></li>
            <li>
                <button type="button" class="btn btn-primary navbar-btn">送信</button>
            </li>
        </ul>
    </nav>
    <h2 class="page-header">入力</h2>
    <form name="form" id="form" class="" action="commit" method="post">
        <div class="tab-content">
            <div class="tab-pane active" id="test1">
                a<BR>
                a<BR>
                a<BR>
            </div>
            <div class="tab-pane" id="test2">
                b<BR>
                b<BR>
                b<BR>
            </div>
            <div class="tab-pane" id="test3">
                c<BR>
                c<BR>
                c<BR>
            </div>
            <div class="tab-pane" id="test4">
                d<BR>
                d<BR>
                d<BR>
            </div>
        </div>
    </form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

もしくは、CSS Grid Layoutを使うことでも可能だと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>入力</title>
    <style>
        :root {
            --gridHeight: 50px;
        }

        body {
            padding-top: calc(var(--gridHeight) * 2);
        }

        .nav::before, .nav::after {
            content: none;
        }

        .nav {
            display: grid;
            width: 100%;
            grid-template-rows: repeat(auto-fill, var(--gridHeight));
            grid-template-columns: repeat(3, minmax(80px, 1fr));
        }

        .navbar-nav {
            margin: 0;
        }

        .navbar-nav > li > a {
            padding-top: 15px;
            padding-bottom: 15px;
        }
    </style>
</head>
<body>
<div class="sitewrapper container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header"></div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#test1" data-toggle="pill">テスト1</a></li>
            <li><a href="#test2" data-toggle="pill">テスト2</a></li>
            <li><a href="#test3" data-toggle="pill">テスト3</a></li>
            <li><a href="#test4" data-toggle="pill">テスト4</a></li>
            <li>
                <button type="button" class="btn btn-primary navbar-btn">送信</button>
            </li>
        </ul>
    </nav>
    <h2 class="page-header">入力</h2>
    <form name="form" id="form" class="" action="commit" method="post">
        <div class="tab-content">
            <div class="tab-pane active" id="test1">
                a<BR>
                a<BR>
                a<BR>
            </div>
            <div class="tab-pane" id="test2">
                b<BR>
                b<BR>
                b<BR>
            </div>
            <div class="tab-pane" id="test3">
                c<BR>
                c<BR>
                c<BR>
            </div>
            <div class="tab-pane" id="test4">
                d<BR>
                d<BR>
                d<BR>
            </div>
        </div>
    </form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/15 14:16

    ご連絡ありがとうございます。
    ご連絡頂きました内容を実施しましたところ、
    テスト1、テスト2、テスト3
    テスト4
    送信
    と、途中から改行して表示されておりました。

    可能であれば、以下の①または②の事が実施したいですが、
    それぞれ出来ますでしょうか?

    ①リンク、ボタンがいくつあっても横に1列に表示したいです。
     ※横に1列にした場合は、横へのスクロールバーも表示したいです。

    ②3つごとに改行して表示したいです。
     ※②のイメージ
      テスト1、テスト2、テスト3
      テスト4、テスト5、送信ボタン
      入力チェックボタン

    以上です。
    よろしくお願いいたします。

    キャンセル

  • 2018/05/16 04:57

    ①: 「いくつあっても」という条件は満たせませんが、現状の回答文に書かれているコードの状態であれば、横一列に並べることが可能です。`flex-wrapプロパティ`の記述を削除するか、値を`nowrap`に変更してください(例: https://jsfiddle.net/vd53qoy9/)。

    ②: 的外れかもしれませんが、回答文にコードを追記しました。

    キャンセル

  • 2018/05/16 13:06

    ご連絡ありがとうございます。
    ご連絡頂きました①or②のCSS Grid Layoutで、
    プログラムを実現しようかと思います。

    キャンセル

+1

@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

Bootstrap 3 によりこのようなCSSが適用されているので、下記を追加すればいいです。

.navbar-nav {
  float: left;
  margin: 0;
}

.navbar-nav > li {
  float: left;
}

.navbar-nav > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/15 14:15

    ご連絡ありがとうございます。
    ご連絡頂きました方法で出来たのですが、
    テスト5のリンクを増やすと、
    テスト1、テスト2、テスト3、テスト4、テスト5
    送信
    のように表示されてしまいます。

    追加のご質問でたいへん申し訳ございませんが、
    以下の①または②の事を実施したいですが、
    それぞれ出来ますでしょうか?

    ①リンク、ボタンがいくつあっても横に1列に表示したいです。
     ※横に1列にした場合は、横へのスクロールバーも表示したいです。

    ②3つごとに改行して表示したいです。
     ※②のイメージ
      テスト1、テスト2、テスト3
      テスト4、テスト5、送信ボタン
      入力チェックボタン

    以上です。
    よろしくお願いいたします。

    キャンセル

  • 2018/05/15 15:10

    そうなるとすでにPC・スマホという問題ではありませんね。navbar (float) の範疇ではないです。
    Grid Systemを使うか、
    https://getbootstrap.com/docs/3.3/css/#grid
    それでだめならBootstrapはあきらめ、グリッドレイアウトを使ってみてはどうでしょうか?
    https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

    キャンセル

  • 2018/05/15 16:39

    ご連絡ありがとうございます。
    試してみます。

    キャンセル

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

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Bootstrap

    1004questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。