bootstrapでラベル、入力項目を横並びにする

###前提・実現したいこと
visualstudio2015でbootstrapを使用し、ラベル、入力項目を横ならびにする。

こういった形で、日付、時間を横並びに表示したいと思っていますが、bootstrapを使って、どのように実現すればいいのかわかりません。
tableなど使用してcellにlabel,textboxを配置していく方法になるのでしょうか？

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

回答2件

ベストアンサー

tableなど使用してcellにlabel,textboxを配置していく方法になるのでしょうか？

table を利用すると、レスポンシブデザインのメリットが減ってしまうので、自分は以下のようにしています。

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
7		<style type="text/css">
8			.margin {
9				margin-top: 10px !important;
10				margin-bottom: 10px !important;
11			}
12		</style>
13	</head>
14	<body>
15		<div class="container">
16			<div class="row">
17				<div class="col-md-6">
18					<form class="form-inline">
19						<div class="row margin">
20							<div class="col-md-6">
21								<div class="form-group">
22									<label for="exampleInputName2">Name</label>
23									<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
24								</div>
25							</div>
26							<div class="col-md-6">
27								<div class="form-group">
28									<label for="exampleInputEmail2">Email</label>
29									<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
30								</div>
31							</div>
32						</div>
33						<div class="row margin">
34							<div class="col-md-6">
35								<div class="form-group">
36									<label for="exampleInputName2">Name</label>
37									<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
38								</div>
39							</div>
40							<div class="col-md-6">
41								<div class="form-group">
42									<label for="exampleInputEmail2">Email</label>
43									<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
44								</div>
45							</div>
46						</div>
47					</form>
48				</div>
49			</div>
50		</div>
51		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
52		<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
53		<script src="/js/bootstrap.min.js"></script>
54	</body>
55</html>

投稿2015/11/16 07:23

退会済みユーザー

総合スコア0

shinji1

2015/11/17 00:10

こんな書き方もできるんですね。わざわざ丁寧にありがとうございます。

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

私は横並びにしたいときは下記のように書いています。
3つ並びもできるので簡単です。

index.html
1<form class="form-inline">
2  <div class="form-group">
3    <label for="email">日付</label>
4    <input type="email" class="form-control" id="email" placeholder="日付" size="10">
5  </div>
6  <div class="form-group">
7    <label for="passwd">時間</label>
8    <input type="password" class="form-control" id="passwd" placeholder="時間">
9  </div>
10  <button type="button" class="btn btn-primary">送信 ≫</button>
11</form>