台灣最大程式設計社群網站
線上人數
1558
 
會員總數:246101
討論主題:189673
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> Bootstrap 切版疑問
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
Bootstrap 切版疑問
價值 : 20 QP  點閱數:943 回應數:5
樓主

Happy Wang
門外漢
0 1
12 3
發送站內信

前輩們好!

小弟近期開始接觸RWD,利用了Bootstrap來練習切版

想要做到在視窗寬度大於某數值時效果是
<圖片><文字><圖片><文字>

再縮小一點後變成
<圖片><文字>
<圖片><文字>

最小時是
<圖片>
<文字>
<圖片>
<文字>

依這種構想後我寫成這樣


當視窗最大跟最小時得到的效果都是我要的,但當視窗縮到中間程度卻變成這樣



上網找了不少的template,但都沒有我要的效果
所以想上來問問前輩們的經驗

謝謝!!

搜尋相關Tags的文章: [ bootstrap ] , [ 切版 ] ,
本篇文章發表於2016-09-03 13:56
1樓
作者回應

Happy Wang
檢舉此回應
不好意思補充一下

程式碼是有兩組相同的,因為相同所以這邊只貼上一組

謝謝~
本篇文章回覆於2016-09-03 13:58
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
最有價值解答

彩虹
檢舉此回應
如果你要達到效果的話
1.請在每一組外面再包一個<div>,「class="col-md-12 col-lg-6"」

2.內層的<div>只要使用「class="col-md-6"」即可

整體如下:

本篇文章回覆於2016-09-03 17:47
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
作者回應

Happy Wang
檢舉此回應
彩虹 大

可以了!! 謝謝您 !

覺得很神奇,為什麼內層寫6也可以把文字擠下去呢?
我以為會各半呢
本篇文章回覆於2016-09-03 21:07
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
回應

彩虹
檢舉此回應
col-md-6
1.當「width >= md」時,都會以「grid 6」的方式顯示
2.當「width < md」 時,自然就會變成 12

所以「col-sm-12」就可以省略不寫


我再舉個例子
「class="col-lg-6 col-md-12 col-sm-12"」等同於「class="col-lg-6"」
因為當width<lg的時候,grid都會是12,所以可以省略不寫
本篇文章回覆於2016-09-03 21:30
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
作者回應

Happy Wang
檢舉此回應
彩虹 大

好的,大致上瞭解了!

謝謝您的指導!
本篇文章回覆於2016-09-04 11:35
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.