このjsFiddleから見ることができるように:jsFiddle要素でhttps://jsfiddle.net/sappe/y6ka1oz5/ウィンドウのサイズを変更したときにフォームの入力位置を変更するにはどうすればよいですか?
<input>
は「流体」です:あなたは、ウィンドウのサイズを変更する場合は入力が位置を変更し、以前入力した後に行くを開始します。
どうすれば同じ結果が得られますか?ブートストラップで?私は実際にjquery UIを使用しています。
このjsFiddleから見ることができるように:jsFiddle要素でhttps://jsfiddle.net/sappe/y6ka1oz5/ウィンドウのサイズを変更したときにフォームの入力位置を変更するにはどうすればよいですか?
<input>
は「流体」です:あなたは、ウィンドウのサイズを変更する場合は入力が位置を変更し、以前入力した後に行くを開始します。
どうすれば同じ結果が得られますか?ブートストラップで?私は実際にjquery UIを使用しています。
ようbootstrap.cssものを使用する必要があります。 これは応答し、画面サイズに応じて列が自動的に再配置されます。これは、ページ全体で最大12の列を許可します。ここで
はチュートリアル----->Bootstrap Grid System
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
完璧な説明、ありがとう – tina
あなたは、ブートストラップグリッドシステムを使用して同じ機能を実現することができ、このhttp://www.bootply.com/slkJpZk5P9
私はこのソリューションを研究しなければならないので、私のケースにはあまり応用できませんが、提案に感謝します – tina
あなたが達成するために何をしようとしているのですか?サイズを変更するときに入力を常に1行/ 1行にしたいですか? – Gezzasa
いいえ、サイズを変更したときに別のものの下に行くようにしてください – tina
まだ分かりにくいです。このフィディドを見てください:https://jsfiddle.net/y6ka1oz5/1/ resisingするとき、彼らはお互いの下にすべて下ります。それともこのように読んでみたいですか?カラム1および4、カラム2および5、カラム3および6。 – Gezzasa