Question

我需要的例子：

图片：

我的代码是这样的：

<div class="container">
        <div class="row">
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <div class="col-6">
                <img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Belgrade">
            </div>
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-right" alt="Niš">
            </div>
        </div>
        <!-- THIS IS PROBLEM -->
        <div class="row">
            <!-- THIS COLUMN NEED TO BE BELOW 1 COLUMN / LEFT SIDE -->
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <!-- THIS COLUMN NEED TO BE BELOW 3 COLUMN / RIGHT SIDE -->
            <div class="col-3 ml-auto">
                <img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
            </div>
        </div>
        <!-- END PROBLEM -->
        <div class="row">
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Novi Sad">
            </div>
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
            </div>
        </div>
    </div>

我不知道问题出在哪里。如果有人知道问题出在哪里，请编写解决方案。谢谢

PS。对不起，我的英语不好

谢谢..

Answer 1

编辑：我已经更新了答案，包括背景图片，并更好地模仿了原始布局。感谢AndreiGheorghiu帮助您更准确地回答此问题。

.grid{
  display: grid;
  grid-gap:10px;
  height:500px;
  grid-template-columns: 1fr .2fr 1fr .2fr 1fr;
  grid-template-areas: "topLeft large large large topRight"
                       "midLeft large large large midRight"
                       "bottomLeft bottomLeft bottomCenter bottomRight bottomRight";
}

.pic{
  background:	url(https://placeimg.com/400/400/any) no-repeat center/cover;
  font: 700 20px sans-serif;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  text-shadow:2px 2px 5px #000;
}

.pic-1{
   grid-area: topLeft;
}

.pic-2{
   grid-area: large;
}

.pic-3{
   grid-area: topRight;
}

.pic-4{
   grid-area: midLeft;
}

.pic-5{
   grid-area: midRight;
}

.pic-6{
   grid-area: bottomLeft;
}

.pic-7{
   grid-area: bottomCenter;
}

.pic-8{
   grid-area: bottomRight;
}

<div class="grid">
  <div class="pic pic-1">Foxwoods</div>
  <div class="pic pic-2">New York City</div>
  <div class="pic pic-3">Las Vegas</div>
  <div class="pic pic-4">Philadelphia</div>
  <div class="pic pic-5">San Francisco</div>
  <div class="pic pic-6">Miami</div>
  <div class="pic pic-7">Boston</div>
  <div class="pic pic-8">Washington D.C.</div>
</div>

Answer 2

您需要将小图像放在同一列中。并将它们显示为块：display:block; width: 100%; height: auto;。

这是我个人要做的。我在.no-gutter上使用.row类，在图像上使用白色边框：

[my-gallery]:not(#_) {
  padding: 8px;
}
[my-gallery] img {
  display: block;
  background-color: #f5f5f5;
  width: 100%;
  height: auto;
  border: 8px solid white;
}
[my-gallery] .strethed img {
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid" my-gallery>
        <div class="row no-gutters">
            <div class="col">
                <img src="https://picsum.photos/300/200/?random" alt="Novi Sad">
                <img src="https://picsum.photos/303/202/?random" alt="Novi Sad">
            </div>
            <div class="col-6 strethed">
                <img src="https://picsum.photos/306/204/?random" alt="Belgrade">
            </div>
            <div class="col">
                <img src="https://picsum.photos/309/206/?random" alt="Niš">
                <img src="https://picsum.photos/312/208/?random" alt="Novi Sad">
            </div>
        </div>
        <div class="row no-gutters" >
            <div class="col">
                <img src="https://picsum.photos/315/210/?random" alt="Novi Sad">
            </div>
            <div class="col">
                <img src="https://picsum.photos/318/212/?random" alt="Novi Sad">
            </div>
            <div class="col">
                <img src="https://picsum.photos/321/214/?random" alt="Novi Sad">
            </div>
        </div>
    </div>

Answer 3

您可以尝试使用此代码，

注意：包含的响应类。在整个页面上运行此代码

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
        </div>
        <div class="col-md-6">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Belgrade">
        </div>
        <div class="col">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Niš">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
        </div>
    </div>
    <div class="row mt-md-4">
        <div class="col-md-4">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
        </div>
        <div class="col-md-4">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
        </div>
        <div class="col-md-4">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
        </div>
    </div>
</div>

引导程序4-网格1和2更改位置

3 个答案: