像這樣的排版應該怎麼用bootstrp去設定- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
1039

會員總數：246219
討論主題：189783

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> CSS/HTML5/Bootstarp >> 像這樣的排版應該怎麼用bootstrp去設定

[]

[我要回覆]

像這樣的排版應該怎麼用bootstrp去設定
價值 : 200 QP 點閱數:671 回應數:3

樓主

邱邱

0	11
290	4

發送站內信

[img]https://drive.google.com/file/d/1aobOYRvB46J8ZEP8v1YI6FmtF3lfZfHa/view?usp=sharing[/img

各位大大, 我想弄一個排版如上圖一樣,

有一個container class 的div, 裡面分成4跟8等分,

左邊的4等分會有一個黑色遮罩遮住背景, 但是他可以超出container的左邊至螢幕的最左邊,

想請大大幫忙一下, 可否給我一些靈感

搜尋相關Tags的文章： [ bootstrap ] , [ layout ] ,
本篇文章發表於2018-09-14 22:56

1樓作者回應邱邱	本篇文章回覆於2018-09-14 23:01 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓回應淺水員	這樣嗎？ <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Hello, world!</title> <style type="text/css"> .banner{ height:350px; background-image:url("0291.jpg"); background-size: cover; } .cover{ position:absolute; background-color:rgba(0,0,0,0.2); height:350px; width:1000%; right:0px; } </style> </head> <body> <div class="container"> <div class="banner row"> <div class="c1 col-md-4"> <div class="cover"></div> 其他元素放這邊不影響 </div> <div class="c2 col-md-8"> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html> 本篇文章回覆於2018-09-15 00:22 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓作者回應邱邱	太感謝你了！本篇文章回覆於2018-09-17 08:54 == 簽名檔 == --未登入的會員無法查看對方簽名檔--

回覆

如要回應,請先登入.

1樓作者回應邱邱	本篇文章回覆於2018-09-14 23:01 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓回應淺水員	這樣嗎？ <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Hello, world!</title> <style type="text/css"> .banner{ height:350px; background-image:url("0291.jpg"); background-size: cover; } .cover{ position:absolute; background-color:rgba(0,0,0,0.2); height:350px; width:1000%; right:0px; } </style> </head> <body> <div class="container"> <div class="banner row"> <div class="c1 col-md-4"> <div class="cover"></div> 其他元素放這邊不影響 </div> <div class="c2 col-md-8"> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html> 本篇文章回覆於2018-09-15 00:22 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓作者回應邱邱	太感謝你了！本篇文章回覆於2018-09-17 08:54 == 簽名檔 == --未登入的會員無法查看對方簽名檔--