ブートストラップテーブルの行オフセット

これは本当に奇妙な効果です。私は2つの行を持つテーブルを作成します。 2行目は何とか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

ブートストラップテーブルの行オフセット

答えて

関連する問題