環境

MAMP
bootstrap-4.0.0-beta.2

やりたい事

フォームのようなものを用意してユーザに入力してもらい、Captureボタンを押してもらうと裏でajaxが走ってデータを返すという動きをさせたいです。

フォームを使った場合の見た目は次のとおりです。これが一応OKな見た目です。（贅沢を言えばURL欄は出来るだけ広いほうがいいです。）

以下のコードを書きました。

ヘッダの一部

html
1<link href="./dist/css/bootstrap.min.css" rel="stylesheet">
2<link href="cover.css?0005" rel="stylesheet">

ボディの一部

html
1            <form class="form-inline">
2              <div class="form-group">
3                <div class="form-check form-check-inline">
4                  <label class="form-check-label">
5                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">PC
6                  </label>
7                </div>
8                <div class="form-check form-check-inline">
9                  <label class="form-check-label">
10                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" checked>Smart Phone
11                  </label>
12                </div>
13                <div class="form-check form-check-inline">
14                  <label class="form-check-label">
15                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">Tablet
16                  </label>
17                </div>
18              </div>
19
20              <div class="form-group">
21                <!-- <label for="exampleFormControlSelect1">Device</label> -->
22                <select class="form-control" id="exampleFormControlSelect1">
23                  <option>Select Device...</option>
24                  <option>iPhone 6+/7+/8+ (1080×1920 px) </option>
25                  <option>iPhone 6/7/8 (750×1334 px) </option>
26                  <option>Samsung Galaxy S6 (1440 x 2560 px)</option>
27                  <option>Samsung Galaxy S8+ (2960 x 1440 px)</option>
28                  <option>Google Pixel (1080 x 1920 px)</option>
29                </select>
30              </div>
31
32              <div class="form-group">
33                <div class="col-auto">
34                  <label class="sr-only" for="inlineFormInputGroup">URL</label>
35                  <div class="input-group">
36                    <div class="input-group-addon">URL</div>
37                    <input type="text" id="url" class="form-control" id="inlineFormInputGroup" placeholder="例) http://www.example.com" size="40">
38
39                  </div>
40                </div>
41
42                <div class="col-auto">
43                  <button type="submit" id="btn_get_capture" class="btn btn-primary">Capture</button>
44                </div>
45              </div>
46
47            </form>

cover.cssは次のようにしています。

css
1/*
2 * Globals
3 */
4
5/* Links */
6a,
7a:focus,
8a:hover {
9  color: #fff;
10}
11
12/* Custom default button */
13.btn-secondary,
14.btn-secondary:hover,
15.btn-secondary:focus {
16  color: #333;
17  text-shadow: none; /* Prevent inheritance from `body` */
18  background-color: #fff;
19  border: .05rem solid #fff;
20}
21
22
23/*
24 * Base structure
25 */
26
27html,
28body {
29  height: 100%;
30  background-color: #333;
31}
32body {
33  color: #fff;
34  text-align: center;
35  /*text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);*/
36}
37
38/* Extra markup and styles for table-esque vertical and horizontal centering */
39.site-wrapper {
40  display: table;
41  width: 100%;
42  height: 100%; /* For at least Firefox */
43  min-height: 100%;
44  box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
45}
46.site-wrapper-inner {
47  display: table-cell;
48  /*vertical-align: top;*/
49}
50.cover-container {
51/*  margin-right: auto;
52  margin-left: auto;
53*/}
54
55/* Padding for spacing */
56.inner {
57  /*padding: 2rem;*/
58  /*padding: 1rem;*/
59  /*border: 1px solid green;*/
60}
61
62
63/*
64 * Header
65 */
66
67.masthead {
68  /*無駄な余白を消す*/
69  /*margin-bottom: 2rem;*/
70  margin-bottom: 0;
71}
72
73.masthead-brand {
74  /*margin-bottom: 0;*/
75}
76
77/*.nav-masthead .nav-link {
78  padding: .25rem 0;
79  font-weight: 700;
80  color: rgba(255,255,255,.5);
81  background-color: transparent;
82  border-bottom: .25rem solid transparent;
83}
84
85.nav-masthead .nav-link:hover,
86.nav-masthead .nav-link:focus {
87  border-bottom-color: rgba(255,255,255,.25);
88}
89
90.nav-masthead .nav-link + .nav-link {
91  margin-left: 1rem;
92}
93*/
94/*.nav-masthead .active {
95  color: #fff;
96  border-bottom-color: #fff;
97}
98*/
99
100@media (min-width: 48em) {
101  /*よく分からないけどこのままだと縦が0になるのでコメントアウト*/
102  /*.masthead-brand {
103    float: left;
104  }*/
105  /*使わないからコメントアウト*/
106  /*.nav-masthead {
107    float: right;
108  }*/
109}
110
111
112/*
113 * Cover
114 */
115
116.cover {
117  /*padding: 0 1.5rem;*/
118}
119/*.cover .btn-lg {
120  padding: .75rem 1.25rem;
121  font-weight: 700;
122}
123*/
124.inner.cover {
125  /*padding: 0 0.5rem;*/
126  padding: 1rem;
127  /*border: 1px solid lightgray;*/
128}
129
130
131/*
132 * Footer
133 */
134
135.mastfoot {
136  color: rgba(255,255,255,.5);
137}
138
139/*
140 * Affix and center
141 */
142
143@media (min-width: 40em) {
144  /* Pull out the header and footer */
145 /* .masthead {
146    position: fixed;
147    top: 0;
148  }
149  .mastfoot {
150    position: fixed;
151    bottom: 0;
152  }
153*/
154
155/* Start the vertical centering */
156.site-wrapper-inner {
157  /*vertical-align: middle;*/
158}
159
160/* Handle the widths */
161  .masthead,
162  .mastfoot,
163  .cover-container {
164    width: 100%; /* Must be percentage or pixels for horizontal alignment */
165  }
166}
167
168@media (min-width: 62em) {
169  .masthead,
170  .mastfoot,
171  .cover-container {
172    /*横幅はいっぱいに使いたいのでコメントアウト*/
173    /*width: 42rem;*/
174    /*縦幅も広めに固定したい。でもやり方が分からない*/
175    /*height: 400px;*/
176  }
177}
178
179/*
180 * その他
181 */
182.capture-wrapper {
183  width: 100%;
184  height: 500px;
185  margin: 0 auto;
186  background-image: url(./images/transparent.png);
187  overflow-y: scroll;
188}
189.capture-img {
190  /*width: 20rem;*/
191  width: 100%;
192}
193.scheme-wapper {
194  width: 500px;
195  height: 50px;
196  margin: 0 auto;
197  background-image: url(./images/image_from_01.png);
198  overflow: hidden;
199  /*border: 1px solid orange;*/
200  /*border: 2px solid black;*/
201  /*outline: 1px solid white;*/
202}
203.scheme-img {
204  width: 100%;
205  /*height: 100%;*/
206  /*width: 500px;*/
207  /*height: 50px;*/
208  /*background: white;*/
209}