Bootstrap 3 - 对齐列高
为教育目的创建一个网站，但我遇到了网格/列高问题.
这是我要复制的网站图片:点我
这是我到目前为止所得到的:点击我
我的问题是，在第一行我有两列 (col-sm-6)，在第一列我嵌套了另一行并在其中创建了 2 个额外的列.但是，第二列似乎比第一列高.我尝试调整 img 大小，但它失去了我需要的响应能力.
希望有人理解我想说的话，我对 Web 开发真的很陌生.我希望有人可以帮助我.:(
请参考随附的图片来验证问题.谢谢.
我的代码 -
HTML:
<!-- 开始投资组合内容--><section class="portfolio-content"><div class="row" id="port-first-row"><div class="col-sm-6" id="port-first-col"><div 类="行"><div 类="col-12"><img src="images/others/large/BrdalPlannerHeader.jpg" alt="image"/></div><!-- 结束 col-12 --><div 类="col-12"><img src="images/others/large/video-home.jpg" alt="video"/></div><!-- 结束 col-12 --></div><!-- 结束行--></div><!-- 结束端口-第一列--><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><!-- 结束端口第一行--><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><!-- 结束 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><!-- 结束 col-sm-6 --></div><!-- 结束端口-第二行--></部分><!-- 结束投资组合内容-->CSS/SASS:
.portfolio-content {最大宽度:100%；}图像{宽度:100%；}.col-sm-6 {填充:0；}#port-first-row {最大宽度:100%；边距:0；}#port2-第二行{最大宽度:100%；边距:0；}这是一个片段，但我不明白为什么列之间的差距如此之大.
虽然看看 https://jsfiddle.net/xeen9s7y/ - 它运作良好.p>
我已将 border:solid 1px red; 添加到图像以获得更好的视觉控制.
img {宽度:100%；高度:100%；边框:实心 1px 红色；}.imgcont {高度:25vw；填充:1px；}.imgcont2 {高度:50vw；填充:1px；}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><section class="portfolio-content"><div class="row" id="port-first-row"><div class="col-xs-6" id="port-first-col"><div 类="行"><div class="col-xs-12 imgcont"><img src="//placehold.it/200x150/2255EE" alt="图片"/></div><!-- 结束 col-12 --><div class="col-xs-12 imgcont"><img src="//placehold.it/200x150/2255EE" alt="视频"/></div><!-- 结束 col-12 --></div><!-- 结束行--></div><!-- 结束端口-第一列--><div class="col-xs-6 imgcont2" id="port-second-col"><img src="//placehold.it/200x150/2255EE" alt="图像"/></div><!--end port-second-col --></div><!-- 结束端口第一行--><div class="row" id="port2-second-row"><div class="col-xs-6 imgcont" id="port2-first-col"><img src="//placehold.it/200x150/2255EE" alt="普吉岛"/></div><!-- 结束 col-sm-6 --><div class="col-xs-6 imgcont" id="port2-second-col"><img src="//placehold.it/200x150/2255EE" alt="julie"/></div><!-- 结束 col-sm-6 --></div><!-- 结束端口-第二行--></部分><!-- 结束作品集内容-->create a site for educational purposes but I'm stuck with grid/column height issue.
Here's an image of site I'm trying to replicate: Click me
Here's what I've got so far: Click me
My problem is, on the first row I have two columns (col-sm-6) and on the first column I nested another row and created 2 additional columns within it. However, the second columns seems to be taller than the first one. I tried to adjust the img size but it loses the responsiveness that I need.
Hope someone understood what I'm trying to say, I'm really new to web development. I hope someone can help me out. :(
Please refer to the images attached to verify issue. Thanks.
My code -
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;
}
解决方案
Here is a snippet, but I can't realize why are so huge gaps between columns.
Although look at https://jsfiddle.net/xeen9s7y/ - it works well.
I've added border: solid 1px red; to images for better visual control.
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 -->
相关文章