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

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

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

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

スマホの場合でも
テスト1、テスト2、テスト3、テスト４、送信
のように横に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>

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

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

回答2件

ベストアンサー

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

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8    <title>入力</title>
9    <style>
10        .nav {
11            display: flex;
12            flex-wrap: wrap;
13        }
14
15        .navbar-nav {
16            margin: 0;
17        }
18
19        .navbar-nav > li > a {
20            padding-top: 15px;
21            padding-bottom: 15px;
22        }
23    </style>
24</head>
25<body style="padding-top: 30px;">
26<div class="sitewrapper container-fluid">
27    <nav class="navbar navbar-default navbar-fixed-top">
28        <div class="navbar-header"></div>
29        <ul class="nav navbar-nav">
30            <li class="active"><a href="#test1" data-toggle="pill">テスト1</a></li>
31            <li><a href="#test2" data-toggle="pill">テスト2</a></li>
32            <li><a href="#test3" data-toggle="pill">テスト3</a></li>
33            <li><a href="#test4" data-toggle="pill">テスト4</a></li>
34            <li>
35                <button type="button" class="btn btn-primary navbar-btn">送信</button>
36            </li>
37        </ul>
38    </nav>
39    <h2 class="page-header">入力</h2>
40    <form name="form" id="form" class="" action="commit" method="post">
41        <div class="tab-content">
42            <div class="tab-pane active" id="test1">
43                a<BR>
44                a<BR>
45                a<BR>
46            </div>
47            <div class="tab-pane" id="test2">
48                b<BR>
49                b<BR>
50                b<BR>
51            </div>
52            <div class="tab-pane" id="test3">
53                c<BR>
54                c<BR>
55                c<BR>
56            </div>
57            <div class="tab-pane" id="test4">
58                d<BR>
59                d<BR>
60                d<BR>
61            </div>
62        </div>
63    </form>
64</div>
65<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
66<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
67</body>
68</html>

追記

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

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8    <title>入力</title>
9    <style>
10        .nav {
11            display: flex;
12            width: 100%;
13            flex-wrap: wrap;
14        }
15
16        .navbar-nav {
17            margin: 0;
18        }
19
20        .navbar-nav > li {
21            flex: 0 1 33.3%;
22        }
23
24        .navbar-nav > li > a {
25            padding-top: 15px;
26            padding-bottom: 15px;
27        }
28    </style>
29</head>
30<body style="padding-top: 100px;">
31<div class="sitewrapper container-fluid">
32    <nav class="navbar navbar-default navbar-fixed-top">
33        <div class="navbar-header"></div>
34        <ul class="nav navbar-nav">
35            <li class="active"><a href="#test1" data-toggle="pill">テスト1</a></li>
36            <li><a href="#test2" data-toggle="pill">テスト2</a></li>
37            <li><a href="#test3" data-toggle="pill">テスト3</a></li>
38            <li><a href="#test4" data-toggle="pill">テスト4</a></li>
39            <li>
40                <button type="button" class="btn btn-primary navbar-btn">送信</button>
41            </li>
42        </ul>
43    </nav>
44    <h2 class="page-header">入力</h2>
45    <form name="form" id="form" class="" action="commit" method="post">
46        <div class="tab-content">
47            <div class="tab-pane active" id="test1">
48                a<BR>
49                a<BR>
50                a<BR>
51            </div>
52            <div class="tab-pane" id="test2">
53                b<BR>
54                b<BR>
55                b<BR>
56            </div>
57            <div class="tab-pane" id="test3">
58                c<BR>
59                c<BR>
60                c<BR>
61            </div>
62            <div class="tab-pane" id="test4">
63                d<BR>
64                d<BR>
65                d<BR>
66            </div>
67        </div>
68    </form>
69</div>
70<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
71<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
72</body>
73</html>

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

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8    <title>入力</title>
9    <style>
10        :root {
11            --gridHeight: 50px;
12        }
13
14        body {
15            padding-top: calc(var(--gridHeight) * 2);
16        }
17
18        .nav::before, .nav::after {
19            content: none;
20        }
21
22        .nav {
23            display: grid;
24            width: 100%;
25            grid-template-rows: repeat(auto-fill, var(--gridHeight));
26            grid-template-columns: repeat(3, minmax(80px, 1fr));
27        }
28
29        .navbar-nav {
30            margin: 0;
31        }
32
33        .navbar-nav > li > a {
34            padding-top: 15px;
35            padding-bottom: 15px;
36        }
37    </style>
38</head>
39<body>
40<div class="sitewrapper container-fluid">
41    <nav class="navbar navbar-default navbar-fixed-top">
42        <div class="navbar-header"></div>
43        <ul class="nav navbar-nav">
44            <li class="active"><a href="#test1" data-toggle="pill">テスト1</a></li>
45            <li><a href="#test2" data-toggle="pill">テスト2</a></li>
46            <li><a href="#test3" data-toggle="pill">テスト3</a></li>
47            <li><a href="#test4" data-toggle="pill">テスト4</a></li>
48            <li>
49                <button type="button" class="btn btn-primary navbar-btn">送信</button>
50            </li>
51        </ul>
52    </nav>
53    <h2 class="page-header">入力</h2>
54    <form name="form" id="form" class="" action="commit" method="post">
55        <div class="tab-content">
56            <div class="tab-pane active" id="test1">
57                a<BR>
58                a<BR>
59                a<BR>
60            </div>
61            <div class="tab-pane" id="test2">
62                b<BR>
63                b<BR>
64                b<BR>
65            </div>
66            <div class="tab-pane" id="test3">
67                c<BR>
68                c<BR>
69                c<BR>
70            </div>
71            <div class="tab-pane" id="test4">
72                d<BR>
73                d<BR>
74                d<BR>
75            </div>
76        </div>
77    </form>
78</div>
79<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
80<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
81</body>
82</html>

投稿2018/05/14 12:30

編集2018/05/15 19:58

s8_chu

総合スコア14731

a0841_1974

2018/05/15 05:16

ご連絡ありがとうございます。ご連絡頂きました内容を実施しましたところ、テスト１、テスト２、テスト３テスト4 送信と、途中から改行して表示されておりました。可能であれば、以下の①または②の事が実施したいですが、それぞれ出来ますでしょうか？ ①リンク、ボタンがいくつあっても横に1列に表示したいです。　※横に1列にした場合は、横へのスクロールバーも表示したいです。 ②3つごとに改行して表示したいです。　※②のイメージ　　テスト1、テスト2、テスト3 　　テスト4、テスト5、送信ボタン　　入力チェックボタン以上です。よろしくお願いいたします。

s8_chu

2018/05/15 19:57

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

a0841_1974

2018/05/16 04:06

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

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

CSS
1@media (min-width: 768px) {
2  .navbar-nav {
3    float: left;
4    margin: 0;
5  }
6  .navbar-nav > li {
7    float: left;
8  }
9  .navbar-nav > li > a {
10    padding-top: 15px;
11    padding-bottom: 15px;
12  }
13}

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

CSS
1.navbar-nav {
2  float: left;
3  margin: 0;
4}
5
6.navbar-nav > li {
7  float: left;
8}
9
10.navbar-nav > li > a {
11  padding-top: 15px;
12  padding-bottom: 15px;
13}

投稿2018/05/15 02:02

x_x

総合スコア13749

a0841_1974

2018/05/15 05:15

ご連絡ありがとうございます。ご連絡頂きました方法で出来たのですが、テスト5のリンクを増やすと、テスト1、テスト2、テスト3、テスト4、テスト5 送信のように表示されてしまいます。追加のご質問でたいへん申し訳ございませんが、以下の①または②の事を実施したいですが、それぞれ出来ますでしょうか？ ①リンク、ボタンがいくつあっても横に1列に表示したいです。　※横に1列にした場合は、横へのスクロールバーも表示したいです。 ②3つごとに改行して表示したいです。　※②のイメージ　　テスト1、テスト2、テスト3 　　テスト4、テスト5、送信ボタン　　入力チェックボタン以上です。よろしくお願いいたします。

x_x

2018/05/15 06: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

a0841_1974

2018/05/15 07:39

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

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

あなたの回答