2017-01-20 7 views
0

このjsFiddleから見ることができるように:jsFiddle要素でhttps://jsfiddle.net/sappe/y6ka1oz5/ウィンドウのサイズを変更したときにフォームの入力位置を変更するにはどうすればよいですか?

<input> 

は「流体」です:あなたは、ウィンドウのサイズを変更する場合は入力が位置を変更し、以前入力した後に行くを開始します。

どうすれば同じ結果が得られますか?ブートストラップで?私は実際にjquery UIを使用しています。

+0

あなたが達成するために何をしようとしているのですか?サイズを変更するときに入力を常に1行/ 1行にしたいですか? – Gezzasa

+0

いいえ、サイズを変更したときに別のものの下に行くようにしてください – tina

+0

まだ分かりにくいです。このフィディドを見てください:https://jsfiddle.net/y6ka1oz5/1/ resisingするとき、彼らはお互いの下にすべて下ります。それともこのように読んでみたいですか?カラム1および4、カラム2および5、カラム3および6。 – Gezzasa

答えて

1

よう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>

+0

完璧な説明、ありがとう – tina

1

あなたは、ブートストラップグリッドシステムを使用して同じ機能を実現することができ、このhttp://www.bootply.com/slkJpZk5P9

+0

私はこのソリューションを研究しなければならないので、私のケースにはあまり応用できませんが、提案に感謝します – tina

関連する問題