ブートストラップ - 4カラムテーブルのCSSを定義する

Question

私は4つのカラムテーブルを持っており、CSSは以下の通りです。これは、最初のchild + td構文を使用して、css内の列のサイズを定義します。例えば、3番目の列がある：ブートストラップMDに

.tbl4Cols td:first-child + td + td 

及びサイズ画面上には、単一のライン上のすべての4列を表示すべきであるとSMの画面では、各行の2列を表示すべきです。したがって、インラインのCSSとHTMLは、以下のHTMLスニペットと同じになります。しかし、私のHTMLは動的で、アウターdivまたはtableをclass="bootStrapRow4Cols"とし、CSSをすべてcolsに動的に適用するようにしたいので、CSSとブートストラップを使用して1番目の子col、2番目の子colなどの構文を複製する必要があります。何か案は？

<div class="row"> 
    <div class="col-md-2 col-sm-4"></div> 
    <div class="col-md-4 col-sm-8"></div> 
    <div class="col-md-2 col-sm-4"></div> 
    <div class="col-md-4 col-sm-8"></div> 
</div> 

4 olumnテーブルのための私のCSSは以下の通りです：

/* tbl4Cols: Used to display entities in 4 columns: 
    Label1: | Control1 | Label2 | Control2 
*/ 
.tbl4Cols { 
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0; 
    margin-top: 0.75em; 
    border: 0 none; 
} 

    .tbl4Cols tr { 
    border: none; 
    border-width: 1px; 
    padding-bottom: 2px; 
    padding-top: 2px; 
    } 

    .tbl4Cols td { 
    border: none; 
    border-width: 0px; 
    padding: 2px 1em 2px 1em; 
    } 

    /*lable1 column*/ 
    .tbl4Cols td:first-child { 
     text-align: right; 
     width: 20%; 
     max-width: 20%; 
     min-width: 20%; 
    } 

     /*control1 column*/ 
     .tbl4Cols td:first-child + td { 
     width: 30%; 
     max-width: 30%; 
     min-width: 30%; 
     } 

     /*lable2 column*/ 
     .tbl4Cols td:first-child + td + td { 
      text-align: right; 
      width: 20%; 
      max-width: 20%; 
      min-width: 20%; 
     } 

      /*control2 column*/ 
      .tbl4Cols td:first-child + td + td + td { 
      width: 30%; 
      max-width: 30%; 
      min-width: 30%; 
      } 

Answer 1

あなたの例のマークアップから、それだけでtr:nth-child(odd) { ... }とtr:nth-child(even) { ... }を使用することがより現実的なようです。

小さな画面解像度で積み重ねる場合は、以下はBootstrap.cssにあります。

table col[class*="col-"] { 
    position: static; 
    display: table-column; 
    float: none; 
} 
table td[class*="col-"], 
table th[class*="col-"] { 
    position: static; 
    display: table-cell; 
    float: none; 
} 

かわりfloat: none;の* COL-SM-で細胞を積み重ねることfloat: left;を使用する@mediaクエリを使用することができます。 bootstrap.cssまたはbootstrap.min.cssの後にカスタムスタイルシートを参照するようにしてください。

これはあなたが正しい方向に始めることを望みます。