다른 요소에 따라 마진을 변경하는 방법은 무엇입니까?

Question

제목이 정확하지 않을 수도 있지만 분명히하기 위해 최선을 다할 것입니다. 또한 사운드를 더 좋게 만드는 방법을 알고 계시다면 알려 주시면 변경하겠습니다. 문제가 보이는 방법은 다음과

는 다음과 같습니다

(언어에 대한 죄송합니다)

그래서 기본적으로 나는 부트 스트랩을 기반으로 코드가이 일을 다른 장치에 확인 보면, 꽤 잘 작동해야하지만, amout의 단어는 모든 머리글에서 다르기 때문에 화면의 크기를 조정할 때 선이 분명하게 끊어지고 머리글의 높이가 커져서 아이콘과 단락이 아래로 이동합니다. 그리고 그것은 아주 좋아 보이지 않습니다. 첫 번째 열의 머리글에 따라 세 번째 단락과 아이콘의 여백을 변경하는 방법이 있습니까? 또는 그것을보기 좋게하는 어떤 방법?

h6 
    { 
    font-size:0.95em; 
    color:rgb(52, 73, 94); 
    padding:0; 
    } 

    .pad 
    { 
    padding:15px; 
    } 

    #icon 
    { 
    width:60px; 
    display:inline-block; 
    } 

    p4 
    { 
    color:rgb(136, 138, 140); 
    text-transform:none; 
    font-size:0.6em; 
    font-weight:normal; 
    display:inline-block; 
    width:72%; 
    vertical-align:top; 
    padding-top:5px; 
    max-width:474px; 
    } 

그리고 HTML :

<div class="row"> 
     <div class="col-md-4 marg"> 
     <h6 class="pad"> Szkolenia pierwszej pomocy </h6> <img src="images/doctor-suitecase-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante. </p4>  <div class="more"> Czytaj więcej... </div> 
     </div> 
     <div class="col-md-4 marg"> 
     <h6 class="pad"> Tworzenie dokumentacji </h6> <img src="images/text-file-5-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante. </p4> <div class="more"> Czytaj więcej... </div> 
     </div> 

     <div class="col-md-4 marg"> 
     <h6 class="pad"> Kontrola jakości <br> </h6> <img src="images/workers-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante. </p4> <div  class="more"> Czytaj więcej... </div> 
     </div> 
    </div> 

Answer 1

는 솔루션입니다. 이것은 귀하의 경우

HTML을

<div class="row"> 
    <div class="col-sm-4 marg"> 
     <h3 class="pad1"> Szkolenia pierwszej pomocy </h3> 
     <img src="images/doctor-suitecase-64.png" id="icon"> 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante. </p> 
     <div class="more"> Czytaj więcej... </div> 
    </div> 
    <div class="col-sm-4 marg"> 
     <h3 class="pad2"> Tworzenie dokumentacji</h3> 
     <img src="images/text-file-5-64.png" id="icon"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.</p> 
     <div class="more"> Czytaj więcej... </div> 
    </div> 

    <div class="col-sm-4 marg"> 
     <h3 class="pad3"> Kontrola jakości</h3> 
     <img src="images/workers-64.png" id="icon"> 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.</p> 
     <div class="more"> Czytaj więcej... </div> 
    </div> 
</div> 

jQuery를

<script type="text/javascript"> 
     $(window).resize(function() { 
      var heig1 = $(".pad1").height(); 
      var heig2 = $(".pad2").height(); 
      var heig3 = $(".pad3").height(); 
      var lrg = Math.max(heig1, heig2, heig3); 
      if(lrg == heig1){ 
       $(".pad2,.pad3").height(lrg); 
      } 
      else if(lrg == heig2){ 
       $(".pad1,.pad3").height(lrg); 
      } 
      else{ 
       $(".pad1,.pad2").height(lrg); 
      } 
     }); 
    </script> 

Answer 2

나는이 문제를 해결할 수로 인 flexbox에보고 할 것을 권장 사전 : 여기

에서

덕분에 CSS입니다. Flexbox는이 문제를 해결할 수있는 플렉스 성장, 플렉스 축소 및 플렉스 기반 (또는 약식 플렉스) 기능을 갖추고 있습니다. 비슷한 문제로 나에게 도움이되었습니다.

출처 : 여기에 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Check this fiddle here 당신은, 그냥 부트 스트랩 그리드 제대로 같은를 사용할 필요가 무엇

를 작동합니다

<div class="col-sm-4"> 
    <div class="row"> 
     <div class="col-md-2"><span class="glyphicon glyphicon-briefcase"></span></div> 
     <div class="col-md-10"> 
      <h3>This is the heading and I like it very much than anything</h3> 
      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.</p> 
     </div> 
    </div> 
</div>