大家好,小妹對於RWD的切版設計還是初心者
自己練習時遇到一些問題想請教各位
不知可否為我解答,謝謝
下面是我練習時做的網頁,用Bootstrap套版
http://angela.96.lt/btest/
在項目列表標題那邊的商品區塊,如果內文字數都統一
段行時也只有兩行的話會是正常的排列,
但如果有其中一個商品裡的內文較多變成三行以上時
第四個區塊就會移位被往旁邊推...
請問要如何讓他排在第一塊下面正常排列呢?
我是有試過4.5.6區塊放在另一個row裡,是會正常在1下面,
但是如果col-xs-6的時候想讓它變兩塊排列,第4塊就不會在3旁邊...
http://angela.96.lt/bootstrap/
這個網頁裡的商品區塊也是有一樣的問題...可以調整視窗大小看看
這件事情困繞很久了不知如何處理..orz
拜託各位幫幫忙,謝謝m(_ _)m

就設定最多兩行文字 多的overflow:hidden;就不會跑動啦

.row的CSS加上 display:flex; flex-wrap:wrap;但我習慣在.row下面加一層div在設定為flex

謝謝樓上們的回答,但是flex不是還是有些瀏覽器不支援嗎回ken 因為我不想用overflow:hidden所以...

https://caniuse.com/#search=flexboxcaniuse是個好網站

謝謝樓上~這個我知道喔~但是就是IE11以下有問題..如果加hack就ok嗎?

https://codepen.io/annahansen/pen/GoyKdw 這個ie10 ok另外也可以考慮用overflow-x:auto，字真的太長就出卷軸