代码之家 › 专栏 › 技术社区 › TheOrdinaryGeek

用于选择列表的引导预置图标

html-select twitter-bootstrap css html

TheOrdinaryGeek · 技术社区 · 6 年前

使用bootstrap(2.0.4版),我试图在选择列表中预先设置一个图标-我无法获得正确的位置。在此阶段,我无法将引导更新为较新版本,必须使用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>

1 回复 | 直到 6 年前

Jatin Kathuria 6 年前

您可以为类附加组件指定绝对位置,并使父类相对。只需添加下面的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;
     }

推荐文章

Softly · 单选按钮未按预期取值

1 年前