twitter-bootstrap 如何将图像内嵌在 Bootstrap 框架中文本字段的右侧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27226793/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put the image inline on right hand side of text field in Bootstrap framework?
提问by
I'm using Bootstrap framework v3.0.1
我正在使用 Bootstrap framework v3.0.1
Following is the HTML code part, where I have a problem:
以下是 HTML 代码部分，我遇到了问题：
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Enter Field ID from challan<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="field_id" id="field_id"/><img src="img/demo_img.png" width="20" height="20"/>
</div>
</div>
Here I want to put the image exactly in front of text field having Id "trans_id". I want to add this image after two white spaces.
在这里，我想将图像恰好放在 ID 为“trans_id”的文本字段的前面。我想在两个空格后添加此图像。
In above code the image is coming on next line of text field.
在上面的代码中，图像出现在文本字段的下一行。
Can someone help me in this regard?
有人可以在这方面帮助我吗？
回答by Manjunath Siddappa
Use form-groupand input-group
使用form-group和input-group
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Enter Field ID from challan<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control" name="field_id" id="field_id"/>
<span class="input-group-addon">
<img src="img/demo_img.png" width="20" height="20"/>
</span>
</div>
</div>
</div>
working fiddle
工作小提琴
回答by Yet a learner
Add the image as Background/content to the element before which you wanted it to be displayed with after/before tag in css
将图像作为背景/内容添加到您希望在 css 中使用 after/before 标记显示的元素之前
For instance,
例如，
.form-control:after{}
Refer these links,hope it would help you.
参考这些链接，希望对你有帮助。
http://css-tricks.com/almanac/properties/c/content/
http://css-tricks.com/almanac/properties/c/content/
.name::before { content: "Name: ";}
the output of content will be
内容的输出将是
<div class="name">Chris</div>
Would render like this:
Name: Chris
Insert image after each list item
ul li:after {
content: url('../images/small_triangle.png');
}
回答by roxid
I did this.Here is the fiddle http://jsfiddle.net/245gd60x/
我这样做了。这是小提琴http://jsfiddle.net/245gd60x/
<div class="form-inline">
<label class="col-sm-4 col-sm-offset-1 control-label">Enter Field ID from challan<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="field_id" id="field_id"/>
<img src="img/demo_img.png" width="20" height="20"/>
</div>
</div>
回答by arshad
You can use this code,nesting the col-sm-5 into 2 parts with some space between them:
您可以使用此代码，将 col-sm-5 嵌套为 2 个部分，它们之间有一些空间：
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Enter Field ID from challan<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<div class="col-sm-9">
<input type="text" class="form-control" name="field_id" id="field_id"/>
</div>
<div class="col-sm-2 col-md-offset-1">
<img src="img/demo_img.png" width="20" height="20"/>
</div>
</div>
</div>
