Question

我想在bootstrap css picture

中设计这样的设计

我试过的是

library(mlbench)
library(class)
set.seed(2)

data_set1 <- mlbench.threenorm(40000,d=10)
plot(data_set1)

data_set1<-data.frame(data_set1)
index1<-sample(2,nrow(data_set1),replace = TRUE,prob=c(0.7,0.3))
train1<-data_set1[index1==1,]
test1<-data_set1[index1==2,]
nn1<-knn(train1,test1,train1[,11],k=1,prob=TRUE)

mean(nn1==test1[,11])
hist(data_set1$x.10)

图像<div class="row"> <div class="col-md-3"> <img class="img-responsive" src="img1.jpg"> </div> <div class="col-md-6"> <img class="img-responsive" src="img3.jpg"> </div> <div class="col-md-3"> <img class="img-responsive" src="img5.jpg"> </div> <div class="col-md-3"> <img class="img-responsive" src="img2.jpg"> </div> <div class="col-md-6"> <img class="img-responsive" src="img4.jpg"> </div> <div class="col-md-3"> <img class="img-responsive" src="img6.jpg"> </div> </div>的高度需要增加，如图所示，

CSS中有专家吗？

Answer 1

将.img-fluid类添加到每个图片中，以便它们与父div一起缩放。这应该工作。 https://getbootstrap.com/docs/4.0/content/images/#responsive-images

Answer 2

您可以通过修改html代码来实现所需的布局。试试这段代码。

<div class="row">
    <div class="col-md-3">
        <img class="img-responsive" src="img1.jpg"> 
        <br>
        <img class="img-responsive" src="img2.jpg">            
    </div>
    <div class="col-md-6">
        <img class="img-responsive" src="img3.jpg"> 
        <br>
        <img class="img-responsive" src="img4.jpg">            
    </div>
    <div class="col-md-3">
        <img class="img-responsive" src="img5.jpg">
        <br>
        <img class="img-responsive" src="img6.jpg">             
    </div>
</div>

如何在bootstrap中增加第一行图像的高度

2 个答案: