作者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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1506403685.A.7FF.html
1F：→ Ken52039: 就设定最多两行文字 多的overflow:hidden;就不会跑动啦 09/26 13:49
2F：推 x2674: .row的CSS加上 display:flex; flex-wrap:wrap; 09/26 14:36
3F：→ x2674: 但我习惯在.row下面加一层div在设定为flex 09/26 14:38
4F：→ miyuuhyde: 谢谢楼上们的回答,但是flex不是还是有些浏览器不支援吗 09/26 14:47
5F：→ miyuuhyde: 回ken 因为我不想用overflow:hidden所以... 09/26 14:48
7F：→ softseaweed: caniuse是个好网站 09/26 16:05
8F：→ miyuuhyde: 谢谢楼上~这个我知道喔~但是就是IE11以下有问题..如果 09/26 16:31
9F：→ miyuuhyde: 加hack就ok吗? 09/26 16:31
11F：→ nottt: 另外也可以考虑用overflow-x:auto，字真的太长就出卷轴 09/26 18:29