作者miyuuhyde (永遠的大吉控)
看板Web_Design
標題[請益] 關於Bootstrap的商品欄位問題
時間Tue Sep 26 13:28:00 2017
大家好,小妹對於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
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.249.27.57
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1506403685.A.7FF.html
→ Ken52039: 就設定最多兩行文字 多的overflow:hidden;就不會跑動啦 09/26 13:49
推 x2674: .row的CSS加上 display:flex; flex-wrap:wrap; 09/26 14:36
→ x2674: 但我習慣在.row下面加一層div在設定為flex 09/26 14:38
→ miyuuhyde: 謝謝樓上們的回答,但是flex不是還是有些瀏覽器不支援嗎 09/26 14:47
→ miyuuhyde: 回ken 因為我不想用overflow:hidden所以... 09/26 14:48
→ softseaweed: caniuse是個好網站 09/26 16:05
→ miyuuhyde: 謝謝樓上~這個我知道喔~但是就是IE11以下有問題..如果 09/26 16:31
→ miyuuhyde: 加hack就ok嗎? 09/26 16:31
→ nottt: 另外也可以考慮用overflow-x:auto，字真的太長就出卷軸 09/26 18:29