예기치 않은 동작이 위의 펜

http://codepen.io/utkarshmttl/full/BLWJVL/예기치 않은 동작이 위의 펜

<html> 
    <head> 
    <title>Footer</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="col-md-5 col-sm-5 col-xs-12" id="left"> 
      <img src="" alt="Lithics logo" style="margin-bottom:25px"> 
      <p style="margin-bottom:25px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatt, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</p> 
      <h2 style="margin-bottom:25px">Payment Method</h2> 
      <p style="margin-bottom:25px"> We are using secure Paypal & Money-bookers payment method. You can pay directly form your Credit Card via Moneybookers or Paypal and NEVER store your card information on our site </p> 
     <ul class="payment-item"> 
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/we-pay-icon.png" alt="Payment"></a></li> 
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/master-cart-icon.png" alt="Payment"></a></li> 
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/a-icon.png" alt="Payment"></a></li> 
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/paypal-icon.png" alt="Payment"></a></li> 
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/visa-icon.png" alt="Payment"></a></li> 
</ul> 
     </div> 
     <div class="col-md-7 col-sm-7 col-xs-12" id="right"> 
      <div class="row"> 
      <div class="col-lg-4 col-md-4 col-xs-6 block-ft"> 
       <h2>Connect with Us</h2> 

    <ul class="fa-ul"> 
     <li class="custom-list-item"><a title="Follow us on youtube" href="#"><i class="fa fa-youtube-square fa-2x"></i>&nbsp &nbsp Follow us on youtube</a></li> 
    <li class="custom-list-item"><a title="Follow us on facebook" href="#"><i class="fa fa-facebook-square fa-2x"></i>&nbsp &nbsp Follow us on facebook</a></li> 
     <li class="custom-list-item"><a title="Follow us on twitter" href="#"><i class="fa fa-twitter-square fa-2x"></i>&nbsp &nbsp Follow us on twitter</a></li> 
     <li class="custom-list-item"><a title="Follow us on google plus" href="#"><i class="fa fa-google-plus-square fa-2x"></i>&nbsp &nbsp Follow us on google plus</a></li> 
       </ul> 
      </div> 
      <div class="col-lg-4 col-md-4 col-xs-6 block-ft"> 
       <h2>About Us</h2> 

    <ul class="fa-ul"> 
     <li class="custom-list-item"><a title="About Us" href="#">About Us</a></li> 
     <li class="custom-list-item"><a title="Contact Us" href="#">Contact Us</a></li> 
     <li class="custom-list-item"><a title="Customer Service" href="#">Customer Service</a></li> 
     <li class="custom-list-item"><a title="Partners" href="#">Partners</a></li> 
     <li class="custom-list-item"><a title="Careers" href="#">Careers</a></li> 
       </ul> 
      </div> 
      <div class="col-lg-4 col-md-4 col-xs-6 block-ft"> 
       <h2>Shopping with Us</h2> 

    <ul class="fa-ul"> 
     <li class="custom-list-item"><a title="Privacy Policy" href="#">Privacy Policy</a></li> 
     <li class="custom-list-item"><a title="Refund Policy" href="#">Refund Policy</a></li> 
     <li class="custom-list-item"><a title="Terms of Use" href="#">Terms of Use</a></li> 
     <li class="custom-list-item"><a title="FAQ" href="#">FAQ</a></li> 
       </ul> 
      </div> 
      <div class="col-lg-4 col-md-4 col-xs-6 block-ft"> 
       <h2>Your Account</h2> 

    <ul class="fa-ul"> 
     <li class="custom-list-item"><a title="Your Account" href="#">Your Account</a></li> 
     <li class="custom-list-item"><a title="Personal Info" href="#">Personal Info</a></li> 
     <li class="custom-list-item"><a title="Search Terms" href="#">Search Terms</a></li> 
     <li class="custom-list-item"><a title="Advanced Search" href="#">Advanced Search</a></li> 
     <li class="custom-list-item"><a title="Order History" href="#">Order History</a></li> 
       </ul> 
      </div> 
      <div class="col-lg-8 col-md-8 col-xs-6 block-ft"> 
       <h2>Contact Us</h2> 

    <ul class="fa-ul"> 
     <li class="custom-list-item"><i class="fa fa-plus-square fa-2x"></i>&nbsp &nbsp Address : No 40 Baria Sreet 133/2 NewYork City, NY, United States</li> 
     <li class="custom-list-item"><i class="fa fa-envelope-square fa-2x"></i>&nbsp &nbsp Email : [email protected]</li> 
     <li class="custom-list-item"><i class="fa fa-phone-square fa-2x"></i>&nbsp &nbsp Phone :</li> 
       </ul> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

스타일 시트 : 여기

h2{ 
    font-size:29px; 
} 
.row{ 
    color:#FFF; 
} 
#left{ 
    background: url('http://demo.magentech.com/themes/sm_love_fashion/skin/frontend/sm_lovefashion/default/images/bg-big-footer.png'); 
    padding: 30px 15px 20px 15px; 
} 
.payment-item{ 
    padding:0px; 
} 
.payment-item .item{ 
    display:inline-block; 
    margin-right:8px; 
} 
.payment-item .item img{ 
    opacity:0.7; 
    filter:alpha(opacity = 70); 
} 
.payment-item .item img:hover{ 
    opacity:1; 
    filter:alpha(opacity = 100); 
} 
#right{ 
    background:#272727; 
    padding: 30px 15px 20px 15px; 
} 
.block-ft{ 
    margin-bottom:35px; 
} 
.fa-ul{ 
    margin-left:0px; 
} 
.custom-list-item{ 
    opacity:0.7; 
    filter:alpha(opacity = 70); 
    margin-bottom:10px; 
} 
.custom-list-item:hover{ 
    opacity:1; 
    filter:alpha(opacity = 100); 
} 
a,a:hover{ 
    color:#ffffff; 
    text-decoration:none; 
}

는 사업부가 자동으로 잘 정렬 "계정"는 이유 때문이다 ? 내가 원하는 것은 대형 장치의 경우 3 개의 동일한 열, 그 다음 행의 크기가 4 인 열과 크기가 8 인 경우입니다. 소형/중형 장치의 경우 2 개의 동일한 열, 다시 다음 열의 2 개의 동일한 열, 마지막으로 크기 6 열을 입력하십시오.
http://codepen.io/utkarshmttl/pen/qaAoJx이처럼

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-4" style="background-color:red">wrfrwf 
    </div> 
    <div class="col-lg-4" style="background-color:green">fgsfgsf 
    </div> 
    <div class="col-lg-4" style="background-color:red">hjlhjl 
    </div> 
    <div class="col-lg-4" style="background-color:green">jlkjkl 
    </div> 
    <div class="col-lg-8" style="background-color:yellow">jhjhuh 
    </div> 
    </div> 
</div>

(전용 대화면 구현) 격자 폭이 소진되면 새 COL 자동 새로운 행 간다. 차이점은 무엇입니까?
또한 아이콘 (fb, twitter 등) 앞의 목록 항목에 텍스트를 가운데 정렬하려면 어떻게합니까? - 줄 높이를 시도했지만 작동하지 않았습니다.
그리고 두 열의 높이 (왼쪽 및 오른쪽 id)가 높이가 더 큰 열의 높이와 동일한 지 어떻게 확인합니까?

출처

2016-09-24 Utkarsh Mittal

너의 col이 다른 높이를 가지므로 왼쪽의 첫 번째 여유 공간에서 멈추는 문제가있다.

블록간에 빈 행을 사용하여 올바르게 정렬 할 수 있습니다.

확인이 펜 : 내가 강제로이 경우 예를 들어

http://codepen.io/anon/pen/GjWdKa

 <div class="row visible-sm visible-xs"></div> 
     <div class="col-lg-4 col-md-4 col-xs-6 block-ft"> 
      <h2>Shopping with Us</h2> 
    ...

는 COL '우리와 함께 쇼핑'하는 sm 및 xs 크기 새 행에 떠.

출처

2016-09-24 20:21:49 cesare

감사합니다. 도움을 주시면 몇 가지 문제가 추가되었습니다. –

같은 div에 두 요소를 정렬하는 경우 줄 높이 및 세로 정렬을 적용 할 수 있습니다. http://codepen.io/sassoli/pen/EgWLXp 다른 접근법은 표 셀에 넣거나 ' 오래된 브라우저 사용 flexbox를 지원할 필요가 없습니다. 이전에 콘텐츠 높이를 모르는 경우 동일한 높이를 col 블록에 적용하려면 순수한 CSS로 처리 할 수 없습니다. 일반적으로 jquery 플러그인을 사용합니다 : http://brm.io/jquery-match-height/ – cesare

나는이 플러그인을 사용했지만 여전히 작동하지 않습니다. 내 열 (id 왼쪽 및 오른쪽 각각), "itemcol"의 클래스를 준 다음 일치 높이 함수를 호출했지만 효과가 없습니다. http://codepen.io/utkarshmttl/pen/BLWJVL –

예기치 않은 동작이 위의 펜

답변

관련 문제