부트 스트랩 테이블 행 오프셋

정말 이상한 효과가 있습니다. 두 행이있는 테이블을 만듭니다. 두 번째 행은 마술처럼 오른쪽으로 1 칸 이동합니다. Try it.부트 스트랩 테이블 행 오프셋

<html> 
    <head> 
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 

    <body> 
    <table> 
     <tr class="header"> 
     <th>ID</th> 
     <th>Last Name</th> 
     </tr> 

     <tr class="row"> 
     <td>1</td> 
     <td>Smith</td> 
     </tr> 
    </table> 
    </body> 
</html>

이 효과가 나타나는 이유는 무엇입니까? 어떻게 제거 할 수 있습니까?

출처

2017-03-12 user38034

클래스 .row에는 부트 스트랩에 특별한 정의가 있습니다. 테이블 행에 사용하면 안됩니다. 이 클래스를 사용하면 다음과 같은 설정으로 의사 요소가 요소에 추가됩니다.

.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .modal-header::after, .modal-header::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before { 
    display: table; 
    content: " "; 
}

이렇게하면 일반 테이블에 충돌이 발생합니다.

tr 태그에서 '행'클래스를 지우면됩니다. 즉, 필요하다면 다른 이름으로 클래스를 사용하십시오.

출처

2017-03-12 01:15:27 Johannes

부트 스트랩 테이블 행 오프셋

답변

관련 문제