私は、次の機能を備えた柔軟なHTMLフォームを構築したい：フレキシブルHTMLフォームレイアウトを作成するにはどうすればよいですか？
で、すべての画面幅
同じHTMLフォームを埋める部品と
HTMLフォーム、 htmlテーブルとHTML + CSSだけを使用することなく？
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<form class="container-fluid">
<div class="row">
<div class="col-md-4 col-xs-6">
<label>field 1</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="text1">
</div>
<div class="col-md-4 col-xs-6">
<label>field 2</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="text2">
</div>
<div class="col-md-4 col-xs-6">
<label>field 3</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-8">
<label>field 4</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="text3">
</div>
<div class="col-md-6 col-xs-8">
<label>field 6</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="text4">
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12"
<label>field5</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<br>
<button type="button" class="btn btn-primary">OK</button>
<button type="button" class="btn btn-info">CANCEL</button>
</form>
</body>
</html>これは、すべてのものですあなたは、最良の方法を使用して、ブートストラップを使用して、あなたがブートストラップを練習する必要があります参照をここで行くことができますしたい、Bootstrap formsをしたい。ハッピーコーディング！
これはそれを行う必要があります。
.form-group {
float: left;
width: 100%;
}
.form-control {
padding: 3px;
box-sizing: border-box;
float: left;
}
.form-control input,
.form-control select,
.form-control textarea {
box-sizing: border-box;
width: 100%;
}
.form-control textarea {
resize: vertical;
}
#form-group-1 .form-control {
width: 33.333%;
}
#form-group-2 .form-control {
width: 50%;
}
#form-group-3 .form-control {
width: 100%;
}
#form-group-4 .form-control {
width: 6em;
}
@media (max-width: 500px) {
#form-group-1 .form-control {
width: 50%;
}
#form-group-2 .form-control {
width: 66.6666%;
}
}<form>
<div class="form-group" id="form-group-1">
<div class="form-control">
<label for="field1">Field 1</label>
<input name="field1" id="field1" placeholder="text1">
</div>
<div class="form-control">
<label for="field2">Field 2</label>
<input name="field2" id="field2" placeholder="text2">
</div>
<div class="form-control">
<label for="field3">Field 3</label>
<select name="field3" id="field3">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
<div class="form-group" id="form-group-2">
<div class="form-control">
<label for="field4">Field 4</label>
<input name="field4" id="field4" placeholder="text4">
</div>
<div class="form-control">
<label for="field5">Field 5</label>
<input name="field5" id="field5" placeholder="text5">
</div>
</div>
<div class="form-group" id="form-group-3">
<div class="form-control">
<label for="field6">Field 6</label>
<textarea name="field6" id="field6"></textarea>
</div>
</div>
<div class="form-group" id="form-group-4">
<div class="form-control">
<input type="submit" value="OK" />
</div>
<div class="form-control">
<input type="button" value="CANCEL" />
</div>
</div>
</form>を（もthis Fiddle参照）
この解決策は外部依存関係を必要としないため、ご注意ください。ありがとう@ジョン・スルーガーズ。 – Davi
CSSメディアクエリ（https://developer.mozilla.org/en/US/docs/Web/CSS/Media_Queries/Using_media_queries）を使用したいと考えています –