Bootstrap 4图像半页宽度
[英]Bootstrap 4 image half page width
问题描述
How can I make responsive layout like this? 
如何制作这样的响应式布局？
I need only few tips how to do it. 我只需要一些提示如何做到这一点。 I dont need full source code. 我不需要完整的源代码。 Sorry for my english. 对不起我的英语不好。
My code: 我的代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-6"> <img src='https://via.placeholder.com/350x150' /> </div> <div class="col-md-6"> CONTENT </div> </div> <div class="row"> <div class="col-md-6"> CONTENT </div> <div class="col-md-6"> <img src='https://via.placeholder.com/350x150' /> </div> </div> </div>
I want img to be half page size. 我希望img是半页大小。
2 个解决方案
解决方案1
2 已采纳 2018-08-22 08:41:51
Check fiddle and snippet below. 检查下面的小提琴和片段。 It is fully responsive and it is working in any device. 它完全响应，它可以在任何设备上工作。
body { padding:15px 0; } .content-box { position:relative; width:100%; min-height:350px; background:#ccc; margin:15px 0; } .img-box.left { position:absolute; top:-15px; right:-15px; bottom:-15px; width:calc( 50vw - 15px ); background:red; } .img-box.right { position:absolute; top:-15px; left:-15px; bottom:-15px; width:calc( 50vw - 15px ); background:red; } @media only screen and (max-width: 768px) { .img-box.left, .img-box.right { position:absolute; top:0px; left:0px; right:0px; bottom:0px; width:100%; background:red; } }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class=container> <div class="row"> <div class="col-md-6"> <div class="content-box"> <div class="img-box left"> image </div> </div> </div> <div class="col-md-6"> <div class="content-box"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="content-box"> </div> </div> <div class="col-md-6"> <div class="content-box"> <div class="img-box right"> image </div> </div> </div> </div> </div> </body>
https://jsfiddle.net/Sampath_Madhuranga/tfz87bqe/18/ https://jsfiddle.net/Sampath_Madhuranga/tfz87bqe/18/
This works for you...Check and let me know if need any help. 这对你有用...检查并告诉我是否需要任何帮助。 Thanks. 谢谢。
解决方案2
1 2018-08-22 08:42:23
here's your layout with bootstrap 4. put image into box--wide but keep in mind pink divs are absolutely positioned so they will not resize the parent - they will take full parent's height which depends on content in gray box 这里是你的布局与引导程序4.将图像放入box--wide但请记住，粉红色的div是绝对定位的，因此它们不会调整父级的大小 - 它们将取整个父级的高度，这取决于灰色框中的内容
to make this responsive - my suggestion is to wrap images into .col-12 and for desktop set it's to position static while images are absolute so they will align inside .container , not .col-12 and on mobile images should be just static 为了使这个响应 - 我的建议是将图像包装到.col-12 ，对于桌面设置，它是static而图像是absolute所以它们将在内部对齐.container ，而不是.col-12和移动图像应该只是static
.container { background: #5f408c; padding: 20px; } .container h1 { text-align: center; color: white; } .box { min-height: 200px; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; text-transform: uppercase; font-size: 40px; } .box--wide { position: absolute; left: 15px; right: calc(50% + 15px); } .box--wide:last-child { right: 15px; left: calc(50% + 15px); } .box--pink { background: #ec008c; } .box--gray { background: #272827; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-12"> <h1>TITLE</h1> </div> </div> </div> <div class="container"> <div class="row"> <div class="box box--pink box--wide">image</div> <div class="col-12 col-md-6 offset-md-6 "> <div class="box box--gray">content</div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-12 col-md-6"> <div class="box box--gray">content</div> </div> <div class="box box--pink box--wide">image</div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.