CSS 将部分选择列表放在视图之外

CSS puts a part of the selection list outside of the view

谁能帮我解决这个问题? 当这个列表的开头消失时,它看起来不太好。

fiddle: Here is a working example

</select>
      </div>
    </section>
    <select class="js-source-states" style="display: none;">
      <optgroup label="">
        <option value='0' selected='selected'>*ALL*</option>
      </optgroup>
      <optgroup label="">
        <option value='69'>Bert Deraedt</option>
        <option value='96'>Etienne Scherpereel</option>
        <option value='95'>Thomas Roost</option>
        <option value='56'>Unknown</option>
      </optgroup>
      <optgroup label="">
        <option value='57'>Debeuf H</option>
        <option value='17'>Jan Quequin</option>
        <option value='80'>Jovan</option>
        <option value='38'>Koen De Volder</option>
        <option value='81'>Kurt Vancauwenberghe</option>
        <option value='85'>Louis Soet.?</option>
        <option value='31'>Sven Vandekerckhove</option>
        <option value='39'>Tarcy Verzele</option>
      </optgroup>          
    </select>
</div>

与 Chrome

使用 Internet Explorer 11

您必须修改您的 bootstrap row class 或添加 class 以覆盖当前负边距。

添加:

.row {    
    margin-left: 0; 
}

jsfiddle