Bootstrap 将图标添加到 Select 列表

Question

使用 Bootstrap (v2.0.4)，我试图在 select 列表前添加一个图标 - 我无法正确放置。我现阶段无法将 Bootstrap 更新到较新的版本，必须使用 v2.0.4

我已经查看了docs，但没有看到任何提及。

我在下面包含了我的代码片段和 link 到 fiddle;

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap-responsive.css" rel="stylesheet"/>
<hr>
<div class="control-group">
 <div class="controls">
  <div class="input-prepend">
   <span class="add-on"><i class="icon-question-sign"></i></span> <select class="input-xlarge">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
   </select>
  </div>
 </div>
</div>
<hr>
<div class="control-group">
 <div class="controls">
  <div class="input-prepend">
   <span class="add-on"><i class="icon-envelope"></i></span><input type="text">
  </div>
 </div>
</div>
<hr>

Answer 1

您可以为您的 class 附加组件提供绝对位置，并使父级 class 相对。只需添加以下 css 即可正常工作 ;)

  .input-prepend input, .input-append input, .input-prepend select,
 .input-append select, .input-prepend .uneditable-input, .input-append
 .uneditable-input {
         padding-left: 30px;
     }


    span.add-on {
    position: absolute;
    left: 1px;
    z-index: 9999;
}
     .input-prepend {
         position: relative;
     }

Bootstrap 将图标添加到 Select 列表

Bootstrap Prepend Icon to Select List

html

css

html-select

twitter-bootstrap