質問者さんの実現したいことは以下のように行えると思います。なお、質問文に書かれていない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/15 05:16
2018/05/15 19:57
2018/05/16 04:06