设置text_field宽度,样式有效但类没有

时间:2016-12-12 19:48:34

标签: css ruby-on-rails

我正在尝试改变某些输入字段的大小。我可以使用内联样式,但尝试使用twitter bootstrap或只是一个类不起作用。

我的表单有

<tr>
    <div class="field">
      <td><%= f.label :item %></td>
      <td><%= f.text_field :item,  style: "width: 150px" %></td>
    </div>
  </tr>


  <tr class="field_100">
    <div class="field">
      <td ><%= f.label :number_of_rolls_fill %></td>
      <td><%= f.number_field :number_of_rolls_fill, class: "field_100" %></td>
    </div>
  </tr>

我看到的是

enter image description here

换句话说,内联样式有效但不是类。

我在application.css中设置了一个类

field_100 {
    width: 100px !important;
    background-color: #2AADD5 !important ;
}

如果我在页面上查看视图源,我会看到

<tr>
    <div class="field">
      <td><label for="bedsheet_line_item">Item</label></td>
      <td><input style="width: 150px" type="text" value="1" name="bedsheet_line[item]" id="bedsheet_line_item" /></td>
    </div>
  </tr>

  <tr class="field_100">
    <div class="field">
      <td ><label for="bedsheet_line_number_of_rolls_fill">Number of rolls fill</label></td>
      <td><input class="field_100" type="number" value="1" name="bedsheet_line[number_of_rolls_fill]" id="bedsheet_line_number_of_rolls_fill" /></td>
    </div>
  </tr>

如果我检查我尝试使用该类的第二个字段,它指向我的style.css主模板的第1122行。那是下面的第二个区块

  input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="number"], input[type="range"], input[type="tel"], input[type="time"], input[type="week"], textarea
        {
           background: #FFFFFF;
           -webkit-border-radius:4px;
           -moz-border-radius:4px;
           border-radius:4px;
           border:1px solid #B9B59D;
           margin:0 auto;
        }
        input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="number"], input[type="range"], input[type="tel"], input[type="time"], input[type="week"], textarea
        {
           width: 100%;
           padding: 4px 0;
           color: #302E22 !important;
           font-size: 13px;
           font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
           font-weight: normal;
           font-style: normal;
           text-shadow: none;

这些是内部低使用率应用,因此如果需要,我可以使用内联样式。但是,我想让这个与类一起工作。我的计划是使用不同的类,例如field_150,field_200等。

1 个答案:

答案 0 :(得分:1)

您忘记了代码中类名前面的点:

field_100 {
    width: 100px !important;
    background-color: #2AADD5 !important ;
}

你的风格只适用于&lt; field_100&gt; - 标签。

使用点按类名选择:

.field_100 {
    width: 100px !important;
    background-color: #2AADD5 !important ;
}