Question

我正在使用Bootstrap framework v3.0.1

以下是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>

这里我想将图像准确地放在具有Id“trans_id”的文本字段的前面。我想在两个白色空格后添加此图像。

在上面的代码中，图像出现在文本字段的下一行。

在这方面有人可以帮助我吗？

Answer 1

使用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>

工作小提琴

http://jsfiddle.net/YXkUT/652/

Answer 2

将图像作为背景/内容添加到您希望在css之前/之前的标记之前显示的元素

例如，

.form-control:after{}

请参阅这些链接，希望它对您有帮助。

http://css-tricks.com/almanac/properties/c/content/

.name::before {  content: "Name: ";}

内容的输出将是

<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');
}

Answer 3

我这样做了。这就是小提琴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>

Answer 4

您可以使用此代码，将col-sm-5嵌套成两部分，它们之间有一些空格：

<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>

如何在Bootstrap框架中将图像内联到文本字段的右侧？

4 个答案: