Question

我使用<a><i><i/></a>方法和<div style="padding:15px"></div>在输入框外添加图标。但输出被破坏了：

HTML：

    <div class="form-group">
    <label for="" class="col-lg-1 control-label">input</label>
    <div class="col-lg-9">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group input-group-md">
                <span class="input-group-addon"><i class="fa fa-file-text"></i></span>
                <input class="form-control" type="text" name="files" placeholder="test">   
                </div>
            <div style="padding:15px"><a class="help-box" rel="popover" data-placement="top" data-original-title="title" data-content="My content goes here"><i class="fa fa-question fa-lg help-ic"></i></a></div>
            </div>
        </div>
    </div>
</div>

破碎：

enter image description here

我需要：

enter image description here

输出是：http://jsfiddle.net/W2zxk/1/

如何解决此问题？

Answer 1

我创造了一个小提琴只是看看它！

http://jsfiddle.net/VwWK8/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/css/font-awesome.css" />
<script src="assets/js/jquery.js"></script>

<style type="text/css">
  .inner-elements {
     float: left;
   }
  .bg-color {
    background-color: #dedede;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
   }
  .bg-color-red {
    background-color: rgb(217, 83, 79);
    color: #fff;
    cursor: pointer;
     border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  a { color: #fff;}
  a:hover { color: #fff;}
  .pad_box {
    padding-bottom: 7px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
  }

</style>
</head>
<body> 
<div class="form-group">
<label for="" class="col-lg-1 control-label">input</label></div>
<div class="col-lg-9">
    <div class="row">
        <div class="col-lg-6">
           <div class="input-group input-group-md input-text-fields">
            <div class="inner-elements">
                <div class="bg-color">
                    <div class="pad_box"><i class="fa fa-file-text"></i></div>
                </div>
            </div>
            <div class="inner-elements">
                <div><input class="form-control" type="text" name="files" placeholder="test"></div>
            </div>
            <div class="inner-elements">
                <div class="bg-color-red">
                    <div class="pad_box"><a id="help" data-container="body" data-toggle="popover" data-placement="right" data-content="Content Here."><i class="fa fa-question fa-lg"></i></a></div>
                </div>
            </div>
        </div>
    </div>
</div>

 </body>
 <script type="text/javascript" src="assets/js/bootstrap.js"></script>
 <script type="text/javascript">
    $('#help').popover('hide');
 </script>
 </html>

Answer 2

选中此fiddle

HTML：

<div class="form-group">
<label for="" class="col-lg-1 control-label">input</label>
<div class="col-lg-9">
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group input-group-md s500">
                <span class="input-group-addon"><i class="fa fa-film"></i></span>
                <input class="form-control" style="width:200px" type="text" name="video" placeholder="">
                    <a class="help-box" rel="popover" data-placement="top" data-original-title="Title" data-content="My content goes here">icon</a>
            </div>
        </div>
    </div>
</div>
</div>

CSS：

.help-box {
 float: right;
 position: fixed;
 }

如果这有用，请告诉我

Answer 3

请查看此演示我刚刚做了一些改动，例如添加“float：left;”并根据s500类中的jsfiddle显示减小宽度500px到450px并在div标签中添加内联css“float：left;和行高：5px;

HTML：

<div class="form-group">
<label for="" class="col-lg-1 control-label">input</label>
<div class="col-lg-9">
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group input-group-md s500">
                <span class="input-group-addon"><i class="fa fa-film"></i></span>
                <input class="form-control" type="text" name="video" placeholder="">
            </div>
                <div style="padding:15px; float:left; line-height:5px;"><a class="help-box" rel="popover" data-placement="top" data-original-title="Title" data-content="My content goes here">icon</a></div>

        </div>
    </div>
</div>

CSS：

.s500 {
width:450px;
float:left;

}

演示：http://jsfiddle.net/jafaruddin/E2Ftp/2/

bootstrap 3：在输入之外添加图标

3 个答案: