创建一个用于教育目的的网站,但我遇到了网格/列高问题。
这是我要复制的站点的图像:
Click me
到目前为止,这是我得到的:Click me
我的问题是,在第一行上我有两列(col-sm-6),在第一列上我嵌套了另一行并在其中创建了2个其他列。但是,第二列似乎比第一列高。我试图调整img大小,但它失去了我所需的响应能力。
希望有人理解我想说的话,我真的是Web开发的新手。我希望有人能帮助我。 :(
请参考所附的图片以验证问题。谢谢。
我的代码-
HTML:
<!-- start portfolio-content -->
<section class="portfolio-content">
<div class="row" id="port-first-row">
<div class="col-sm-6" id="port-first-col">
<div class="row">
<div class="col-12">
<img src="images/others/large/BridalPlannerHeader.jpg" alt="image"/>
</div> <!-- end col-12 -->
<div class="col-12">
<img src="images/others/large/video-home.jpg" alt="video" />
</div> <!-- end col-12 -->
</div> <!-- end row -->
</div> <!-- end port-first-col -->
<div class="col-sm-6" id="port-second-col">
<img src="images/home/medium/KC_phuket-thailand-wedding-photographer_0061.jpg" alt="image" />
</div> <!--end port-second-col -->
</div> <!-- end port-first-row -->
<div class="row" id="port2-second-row">
<div class="col-sm-6" id="port2-first-col">
<img src="images/others/large/Phuket_view.jpg" alt="phuket" />
</div> <!-- end col-sm-6 -->
<div class="col-sm-6" id="port2-second-col">
<img src="images/others/large/Julie+Andrew_darinimages-409.jpg" alt="julie" />
</div> <!-- end col-sm-6 -->
</div> <!-- end port-second-row -->
</section> <!-- end portfolio-content -->
CSS / SASS:
.portfolio-content {
max-width: 100%;
}
img {
width: 100%;
}
.col-sm-6 {
padding: 0;
}
#port-first-row {
max-width: 100%;
margin: 0;
}
#port2-second-row {
max-width: 100%;
margin: 0;
}
最佳答案
这是一个片段,但我不明白为什么列之间的间隙如此之大。
尽管查看https://jsfiddle.net/xeen9s7y/-效果很好。
我为图像添加了border: solid 1px red;
,以实现更好的视觉控制。
img {
width: 100%;
height: 100%;
border: solid 1px red;
}
.imgcont {
height: 25vw;
padding: 1px;
}
.imgcont2 {
height: 50vw;
padding: 1px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="portfolio-content">
<div class="row" id="port-first-row">
<div class="col-xs-6" id="port-first-col">
<div class="row">
<div class="col-xs-12 imgcont">
<img src="//placehold.it/200x150/2255EE" alt="image"/>
</div> <!-- end col-12 -->
<div class="col-xs-12 imgcont">
<img src="//placehold.it/200x150/2255EE" alt="video" />
</div> <!-- end col-12 -->
</div> <!-- end row -->
</div> <!-- end port-first-col -->
<div class="col-xs-6 imgcont2" id="port-second-col">
<img src="//placehold.it/200x150/2255EE" alt="image" />
</div> <!--end port-second-col -->
</div> <!-- end port-first-row -->
<div class="row" id="port2-second-row">
<div class="col-xs-6 imgcont" id="port2-first-col">
<img src="//placehold.it/200x150/2255EE" alt="phuket" />
</div> <!-- end col-sm-6 -->
<div class="col-xs-6 imgcont" id="port2-second-col">
<img src="//placehold.it/200x150/2255EE" alt="julie" />
</div> <!-- end col-sm-6 -->
</div> <!-- end port-second-row -->
</section> <!-- end portfolio-content -->