时间戳

首页 > 解决方案 > bootstrap 4 - 特别安排图像？

html - bootstrap 4 - 特别安排图像？

问题描述

我在我的 Laravel 中创建了一个简单的页面，在该页面中，我有三个部分，主要是navigation,content和footer. 我完成了导航和页脚布局。在内容部分，我希望使用引导程序来放置我的图像布局，如下所示：

图片：

在此处输入图像描述

这只是一个一般性的想法，但我需要它具有响应性，因此它也适合移动布局。

我尝试的是Masonry用于 CSS，但它不适合响应式移动布局。我尝试使用引导程序 4，但 IMG3 和 IMG4/5 之间的对齐距离太远，并且放置边距不能将它们对齐得足够近。

我的代码：

@section('content')
<div class="container">

    <div class="row">
      <div class="col-sm">
        <img src="{{asset('/images/Home_Bed.jpg')}}" class="img-fluid custom-position-1" alt="">
      </div>
      <div class="col-sm col-8">
        <img src="//via.placeholder.com/350x150" class="img-fluid custom-position-2" alt="">
      </div>
      <div class="col-sm custom-position-3">
        <img src="{{asset('/images/Home_Kitchen.jpg')}}" class="img-fluid custom-position-3" alt="">
      </div>
    </div>

   <div class="row align-items-end">
      <div class="col col-8">
        <img src="{{asset('/images/Shop_Page.jpg')}}" class=" img-fluid custom-position-4" alt="">
      </div>    
      <div class="col">
        <img src="{{asset('/images/Home_Sofa.jpg')}}"  class="img-fluid custom-position-5" alt="">
      </div>
    </div>
  </div>
@endsection

.row {
  margin-bottom: 30px;
}




.custom-position-1{
 position: relative;
 bottom: -160px;
 left: 50px;
 height:100px;
 object-fit: cover;
}


.custom-position-2{
 position:relative;
 right:100px;
 object-fit:cover;
}


.custom-position-3{
 position: relative;
 bottom: -160px;
 left: 50px;
 height:100px;
 object-fit: cover;
}

.custom-position-4{
 position: relative;
 height: 400px;
 width:800px;
 object-fit: cover;
}




.custom-position-5{

    position: relative;
    height:300px;
 left:50px;
 top: 100px;
 object-fit: cover;
}

有谁知道如何使它变好？

标签： htmlcsstwitter-bootstrap

解决方案

您是否正在寻找这样的解决方案？

如果你想有一些间距使用边距类。

img {
  width: 100%;
  height: 100%;
}
[class*="col-"],
.flex-grow-0 {
  border: 1px solid black;
}
.img-fluid {
  padding: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row m-0">
    <div class="col-8 p-0">
      <div class="row m-0">
        <div class="col-6 p-0">
          <img src="http://placehold.it/300x300" class="img-fluid" alt="" />
        </div>
        <div class="col-6 p-0">
          <img src="http://placehold.it/300x300" class="img-fluid" alt="" />
        </div>
        <div class="col-12 p-0">
          <img src="http://placehold.it/300x300" class="img-fluid" alt="" />
        </div>
      </div>
    </div>
    <div class="col-4  p-0 d-flex">
      <div class="d-flex flex-column">
        <div class="flex-grow-0 mt-auto">
          <img src="http://placehold.it/300x500" class="img-fluid" alt="" />
        </div>
        <div class="flex-grow-0">
          <img src="http://placehold.it/400x400" class="img-fluid" alt="" />
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读