如何在窗口大小調整時更改表單中輸入的位置？

正如你可以從這個的jsfiddle看到：https://jsfiddle.net/sappe/y6ka1oz5/如何在窗口大小調整時更改表單中輸入的位置？

<input>

中的jsfiddle元素是「流體」：如果你調整窗口大小的輸入將改變位置，並開始之前的輸入後。

我該如何達到相同的結果？用bootstrap？我實際上使用jQuery UI。

來源

2017-01-20 tina

你到底想達到什麼目的？調整大小時，您是否總希望輸入在一行/每行中？ – Gezzasa

不，我希望他們在調整大小後去一個下一個 – tina

仍在努力理解。請看這個小提琴：https://jsfiddle.net/y6ka1oz5/1/當重新調整時，他們目前都是屬於彼此的。或者你想讓它看起來像這樣。第11列和第4列，第2列2和第5列第3和第3和第6列。 – Gezzasa

可以使用引導網格系統實現相同的功能。它是響應式的，並且列將根據屏幕大小自動重新排列。它允許整個頁面最多有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>

來源

2017-01-20 11:28:45

完美的解釋，謝謝 – tina

您可能需要使用bootstrap.css像這樣http://www.bootply.com/slkJpZk5P9

來源

2017-01-20 11:05:36

我要研究這個解決方案，因爲對我的情況不是很適用，但是謝謝你的建議 – tina

如何在窗口大小調整時更改表單中輸入的位置？

回答

相關問題