引導表上的CSS

-1

我想在我的Rails 4應用程序中使用引導表。引導表上的CSS

我：

.intpol3 glyphicon glyphicon-ok { 
 
    font-family: 'Roboto', sans-serif; 
 
    color: black; 
 
    font-size: 15px; 
 
    text-align:center; 
 
    letter-spacing:1.5px; 
 
    line-height: 1.5; 
 
}

<div class="intpol3"> 
 
    <table class="table table-bordered"> 
 
    <tr> 
 
     <td></td> 
 
     <td class="warning">Try us</td> 
 
     <td class="success">The basics</td> 
 
     <td class="info">The lot</td> 
 
     <td class="danger">!!!</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>1</td> 
 
     <td>$7</td> 
 
     <td>$8</td> 
 
     <td>$9</td> 
 
     <td>$10</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>2</td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>3</td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>4</td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>5</td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>6</td> 
 
     <div class="intpol4"> 
 
     <td><span class="glyphicon glyphicon-remove" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
     <td><span class="glyphicon glyphicon-ok" </span> 
 
     </td> 
 
    </tr> 
 
    </div> 
 

 
    </table> 
 
</div>

我無法弄清楚如何：

應用的樣式表元素。我希望將此類中定義的字體和樣式應用於表格元素，而不是採用的標準文本格式。

儘管它看起來不像get bootstrap網站上顯示的那樣，所以我不確定它是在哪裏施加的。
使所有四列等寬;他們當前對單元格中的文本數量有反應

樣式字形圖標。我做了一個名爲CSS的div類：

.intpol3 glyphicon glyphicon-ok { 
    font-family: 'Roboto', sans-serif; 
    color: black; 
    font-size: 15px; 
    text-align:center; 
    letter-spacing:1.5px; 
    line-height: 1.5; 
}

我想這個造型應用到圖標。但是，「確定」圖標是大紅色的（不像標準引導程序圖標）。我沒有在應用程序中的任何其他位置設計類圖標&我不知道爲什麼該樣式不適用於樣式顯示在最後一個表格行（6）中的文本元素。

你如何設計引導表來解決這些問題？

來源

2015-11-08 Mel

您的HTML代碼中有錯誤。（跨度不關閉）。

這是沒有這些錯誤代碼：

<div class="intpol3"> 
    <table class="table table-bordered"> 
     <tr> 
      <td></td> 
      <td class="warning">Try us</td> 
      <td class="success">The basics</td> 
      <td class="info">The lot</td> 
      <td class="danger">!!!</td> 
     </tr> 

     <tr> 
      <td>1</td>  
      <td>$7</td> 
      <td>$8</td> 
      <td>$9</td> 
      <td>$10</td> 
     </tr> 

     <tr> 
      <td>2</td>  
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
     </tr> 

     <tr> 
      <td>3</td>  
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
     </tr> 

     <tr> 
      <td>4</td>  
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
     </tr> 

     <tr> 
      <td>5</td>  
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
     </tr> 

     <tr> 
      <td>6</td><div class="intpol4"> 
      <td><span class="glyphicon glyphicon-remove"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
      <td><span class="glyphicon glyphicon-ok"></span></td> 
     </tr></div> 

    </table> 
</div>

對於相同寬度的列這個答案可能是你正在尋找已經：

https://stackoverflow.com/a/18498071/3686898

與Twitter引導3用途： class =「col-md- *」其中*是寬度的列數。

<tr class="something"> 
    <td class="col-md-2">A</td> 
    <td class="col-md-3">B</td> 
    <td class="col-md-6">C</td> 
    <td class="col-md-1">D</td> 
</tr>

讓我知道這是否已經解決您的問題。我不太瞭解你的問題，所以如果有必要，可以多加一點解釋:)

來源

2015-12-05 17:18:11

引導表上的CSS

回答

相關問題