Bootstrap - 爲4列表定義Css

Question

我有一個4列表，CSS如下。它使用第一個child + td語法在css中定義列的大小。例如，第三列是：

.tbl4Cols td:first-child + td + td 

在引導MD和上述尺寸的屏幕它應該顯示在單獨的一行的所有4列和在SM屏幕它應該顯示在每一行上2列。因此，內聯CSS和HTML將如下面的HTML代碼片段所示。然而，我的HTML是動態的，我只想標記外div或table與class="bootStrapRow4Cols"和CSS應用於所有列動態，所以我需要使用CSS和Bootstrap複製第一個孩子col，第二個孩子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; 
} 

您可以使用@media查詢使用float: left;堆疊細胞在COL-SM- *而不是float: none;。只要確保在bootstrap.css或bootstrap.min.css之後引用自定義樣式表即可。

希望這能讓你開始朝正確的方向發展。