CSS на Bootstrap Table

Question

Я пытаюсь использовать таблицу начальной загрузки в приложении Rails 4.

у меня есть:

.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>

Я не могу понять, как:

1. применять моделирование в class="intpol3" к элементам таблицы. Я хочу, чтобы шрифт и стиль, определенные в этом классе, были применены к элементам таблицы, а не принятый стандартный текстовый формат.

   Хотя он не похож на тот, что показан на веб-сайте get bootstrap, поэтому я не уверен, где это наложено.

2. Сделать все четыре столбца равными ширинами; они в настоящее время реагируют на количество текста в ячейках

3. Стиль иконки глифов. Я сделал класс 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; 
   } 
   

Я хочу, чтобы этот стиль, чтобы применить к пиктограммам. Однако значок «ok» является большим и красным (не похожим на стандартный значок начальной загрузки). У меня нет класса стиля где-нибудь еще в приложении для значка ok & Я не уверен, почему этот стиль не применяется к стилю текстового элемента, который показан в последней строке таблицы (6).

Как вы создаете стопы начальной загрузки для решения этих проблем?

Answer 1

У вас возникла ошибка в вашем 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 Bootstrap 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> 

---

Позвольте мне знать, если это решит ваши проблемы уже. Я действительно не понимаю вашу проблему, поэтому, возможно, поместим в нее немного больше объяснений, если необходимо :)