[英]Set text_field width, style works but class doesn't
我正在嘗試更改某些輸入字段的大小。 我可以使它與內聯樣式一起使用,但是嘗試使用Twitter引導程序或僅使用類無法正常工作。
我的表格有
<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>
我看到的是
換句話說,內聯樣式有效,但類無效。
我在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等。
您在代碼中忘記了類名前面的點:
field_100 {
width: 100px !important;
background-color: #2AADD5 !important ;
}
您的樣式只能應用於<field_100>-標記。
使用點來按類名稱進行選擇:
.field_100 {
width: 100px !important;
background-color: #2AADD5 !important ;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.