Question

使用Bootstrap（v2.0.4），我正在尝试将图标添加到选择列表的前面-我无法正确放置该展示位置。我目前无法将Bootstrap更新到较新版本，必须使用v2.0.4

我浏览了docs，但看不到任何提及。

我在下面添加了代码段以及指向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

您可以为您的班级附加组件赋予绝对位置，并使父类为相对。只需添加以下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 Prepend图标选择列表

1 个答案: