个人中心
gpt4 book ai didi

html - Bootstrap 3 : add icon outside of input

转载 作者：太空宇宙 更新时间：2023-11-03 18:09:46 25 4
gpt4 key购买 nike

我在输入框外添加图标 <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/

如何解决这个问题？

最佳答案

我创建了一个 fiddle ，看看吧!

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>

关于html - Bootstrap 3 : add icon outside of input，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23927207/

25 4 0
文章推荐： c# - 委托(delegate)的默认参数值
文章推荐： python - pyQT4 py3无法在QFrame背景中显示图像
文章推荐： Python - Matplotlib，绘制常量场
文章推荐： python - 使用 Python 在 Excel (.xlsx) 中查找和替换字符串
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com