ブートストラップ3 - 列の高さを調整する

Question

教育目的でサイトを作成しますが、グリッド/列の高さの問題が残っています。ここで

は私が複製しようとしているサイトの画像です： Click me

ここで私はこれまで持っているものです：Click me

私の問題は、私は2つのカラム（COLを持っている最初の行に、あります-sm-6）、最初の列には別の行がネストされ、その中に2つの追加の列が作成されました。しかし、2番目の列は最初の列よりも背が高いようです。 imgサイズを調整しようとしましたが、必要な応答性が失われました。

誰かが私が言っていることを理解していることを願っています。私はウェブ開発に本当に新しいです。私は誰かが私を助けることを願っています。 。。:(

おかげ

私のコードの問題を確認するために、添付画像を参照してください -

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; 
    } 

Answer 1

スニペットですが、どうしてなぜカラム間に大きなギャップがあるのか​​分かりません。

https://jsfiddle.net/xeen9s7y/をご覧ください。うまくいきます。

私は、より視覚的なコントロールのために画像にを追加しました。

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 -->