zurb基础错误类未正确呈现

Question

我正在使用foundation 3，并且已经在我的表单上设置了自定义类，尽管我遇到的问题是select下拉菜单和error类没有以它应该的方式工作。

我希望的是，我可以将选择框的宽度设置为与错误消息相同的列宽，以使视图看起来更加美观

​

​

<div class="four columns">
    <select class="four columns" id="event_location_id" name="event[location_id]" style="display: none; "><option value="">None</option>
<option value="8">APK</option>
<option value="10">BAL</option>
<option value="11">BANK</option>
<option value="12">BANY</option>
<option value="13">BEN1</option>
<option value="14">BEN2</option>
<option value="15">BER</option>
<option value="16">BRU</option>
<option value="17">BTN</option>
<option value="18">CAM</option>
<option value="19">CAUL-Ind</option>
<option value="20">CER</option>
<option value="22">DAN</option>
<option value="23">DON</option>
<option value="24">DRO</option>
<option value="25">ELG</option>
<option value="26">ELT</option>
<option value="27">ES1</option>
<option value="28">ES2</option>
<option value="29">F-1</option>
<option value="30">F-2</option>
<option value="31">FP</option>
<option value="32">GEL</option>
<option value="33">GRN</option>
<option value="34">GRN-2</option>
<option value="35">H-1</option>
<option value="36">H-2</option>
<option value="37">HAL-1</option>
<option value="38">HAL-2</option>
<option value="39">HHF (prev WAV)</option>
<option value="40">HUN</option>
<option value="41">KNG</option>
<option value="42">KNX</option>
<option value="43">LAT</option>
<option value="45">MEL</option>
<option value="46">MGV</option>
<option value="47">MHS</option>
<option value="48">MNT</option>
<option value="49">MON</option>
<option value="50">MON-Ind</option>
<option value="51">MUH</option>
<option value="52">PCK</option>
<option value="53">PEGS</option>
<option value="54">PHC</option>
<option value="55">PSF</option>
<option value="56">RMIT</option>
<option value="57">S-1</option>
<option value="58">S-2</option>
<option value="59">S.N.H.C.</option>
<option value="60">SHP</option>
<option value="61">SKW</option>
<option value="62">STB</option>
<option value="63">T.B.A.</option>
<option value="64">TRI</option>
<option value="65">WARN</option>
<option value="66">WER</option>
<option value="67">WGS</option>
<option value="68">WGW</option>
<option value="69">WHF</option>
<option value="71">YAR</option>
<option value="72">YVG</option>
<option value="21">CHU</option>
<option value="70">WOD</option>
<option value="73">Test</option>
<option value="9">ASH</option>
<option value="7">ALT</option>
<option value="44">MBN</option></select><div class="custom dropdown" style="width: 155px; "><a href="#" class="current">None</a><a href="#" class="selector"></a><ul style="width: 155px; "><li class="selected">None</li><li>APK</li><li>BAL</li><li>BANK</li><li>BANY</li><li>BEN1</li><li>BEN2</li><li>BER</li><li>BRU</li><li>BTN</li><li>CAM</li><li>CAUL-Ind</li><li>CER</li><li>DAN</li><li>DON</li><li>DRO</li><li>ELG</li><li>ELT</li><li>ES1</li><li>ES2</li><li>F-1</li><li>F-2</li><li>FP</li><li>GEL</li><li>GRN</li><li>GRN-2</li><li>H-1</li><li>H-2</li><li>HAL-1</li><li>HAL-2</li><li>HHF (prev WAV)</li><li>HUN</li><li>KNG</li><li>KNX</li><li>LAT</li><li>MEL</li><li>MGV</li><li>MHS</li><li>MNT</li><li>MON</li><li>MON-Ind</li><li>MUH</li><li>PCK</li><li>PEGS</li><li>PHC</li><li>PSF</li><li>RMIT</li><li>S-1</li><li>S-2</li><li>S.N.H.C.</li><li>SHP</li><li>SKW</li><li>STB</li><li>T.B.A.</li><li>TRI</li><li>WARN</li><li>WER</li><li>WGS</li><li>WGW</li><li>WHF</li><li>YAR</li><li>YVG</li><li>CHU</li><li>WOD</li><li>Test</li><li>ASH</li><li>ALT</li><li>MBN</li></ul></div><small for="event_location_id" class="error">can't be blank</small>
  </div>

Answer 1

这是一个reported bug (显然是6天前修复的)。

同时，您可以使用以下两行CSS轻松修复它：

.custom.dropdown {
    width: 100% !important;  /* fixes width issue */
}
.custom.dropdown + .error {
    margin-top: -9px;        /* fixes overlapping */
}

你可以使用see it in action here。