[請益] 關於Bootstrap的商品欄位問題

看板Web_Design作者 (永遠的大吉控)時間7年前 (2017/09/26 13:28), 編輯推噓3(308)
留言11則, 5人參與, 最新討論串1/1
大家好,小妹對於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

09/26 13:49, , 1F
就設定最多兩行文字 多的overflow:hidden;就不會跑動啦
09/26 13:49, 1F

09/26 14:36, , 2F
.row的CSS加上 display:flex; flex-wrap:wrap;
09/26 14:36, 2F

09/26 14:38, , 3F
但我習慣在.row下面加一層div在設定為flex
09/26 14:38, 3F

09/26 14:47, , 4F
謝謝樓上們的回答,但是flex不是還是有些瀏覽器不支援嗎
09/26 14:47, 4F

09/26 14:48, , 5F
回ken 因為我不想用overflow:hidden所以...
09/26 14:48, 5F

09/26 16:05, , 6F

09/26 16:05, , 7F
caniuse是個好網站
09/26 16:05, 7F

09/26 16:31, , 8F
謝謝樓上~這個我知道喔~但是就是IE11以下有問題..如果
09/26 16:31, 8F

09/26 16:31, , 9F
加hack就ok嗎?
09/26 16:31, 9F

09/26 18:28, , 10F
09/26 18:28, 10F

09/26 18:29, , 11F
另外也可以考慮用overflow-x:auto,字真的太長就出卷軸
09/26 18:29, 11F
文章代碼(AID): #1PoULbV_ (Web_Design)
文章代碼(AID): #1PoULbV_ (Web_Design)