Question

＆lt; p＆gt;我是stackoverflow和bootstrap的新手 - 请帮帮我＆lt; / p＆gt; ＆lt; p＆gt;我想在输入字段中平行调整两个相同的图标，如下图所示：＆lt; / p＆gt; ＆lt; p＆gt;我想要的结果如下：＆lt; a href =＆＃34; https://i.stack.imgur.com/V2aDE.png" rel =＆＃34; nofollow noreferrer＆＃34;＆gt;＆lt; img src =＆＃34; https：//i.stack.imgur.com/V2aDE.png" alt =＆＃34;在此处输入图像说明＆＃34;＆gt;＆lt; / a＆gt;＆lt; / p＆gt; ＆lt; p＆gt;注意：HTML的结构将保持不变＆lt; / p＆gt; ＆lt; p＆gt;＆lt; div class =＆＃34; snippet＆＃34;数据琅=＆＃34; JS＆＃34;数据隐藏=＆＃34;假＆＃34;数据的控制台=＆＃34;假＆＃34;数据巴贝尔=＆＃34;假＆＃34;＆GT;＆＃13; ＆lt; div class =＆＃34; snippet-code＆＃34;＆gt;＆＃13; ＆lt; pre class =＆＃34; snippet-code-css lang-css prettyprint-override＆＃34;＆gt;＆lt; code＆gt; .inptRelative {＆＃13; 职位：亲属＆＃13; }＆＃13; ＆＃13; .inptAbsolute {＆＃13; 位置：绝对;＆＃13; 右：5px;＆＃13; 顶部：5px; ＆＃13; }＆LT; /代码＆GT;＆LT; /预＆GT;＆＃13; ＆lt; pre class =＆＃34; snippet-code-html lang-html prettyprint-override＆＃34;＆gt;＆lt; code＆gt;＆lt; div class =＆＃34; col-sm-6＆＃34;＆gt;＆＃ 13; ＆lt; div class =＆＃34; form-group-sm＆＃34;＆gt;＆＃13; ＆＃13; ＆lt; label＆gt;业务线＆lt; / label＆gt;＆＃13; ＆lt; div class =＆＃34; inptRelative＆＃34;＆gt;＆＃13; ＆lt; a href =＆＃34;＃＆＃34; class =＆＃34; inptAbsolute glyphicon glyphicon-list＆＃34;＆gt;＆lt; / a＆gt;＆＃13; ＆lt; a href =＆＃34;＃＆＃34; class =＆＃34; inptAbsolute glyphicon glyphicon-list＆＃34;＆gt;＆lt; / a＆gt;＆＃13; ＆lt; input type =＆＃34; text＆＃34; ID =＆＃34;本身份识别码＆＃34;值=＆＃34;＆＃34;＆GT;＆＃13; ＆LT; / DIV＆GT; ＆＃13; ＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆LT; / DIV＆GT;＆LT; /代码＆GT;＆LT; /预＆GT;＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆LT; / p为H.

Answer 1

请尝试使用此代码

.form-horizontal .has-feedback .form-control-feedback:last-child {
    right: 35px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal">
    <div class="form-group has-feedback">
        <label class="control-label col-xs-5" for="inputSuccess2">my desired result is as following:</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
            <span class="glyphicon glyphicon-th-list form-control-feedback" aria-hidden="true"></span>
            <span aria-hidden="true" class="glyphicon glyphicon-th-list form-control-feedback"></span>
        </div>
    </div>
    <div class="form-group has-feedback">
        <label class="control-label col-xs-5" for="inputSuccess2">my desired result is as following:</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
            <span class="glyphicon glyphicon-th-list form-control-feedback" aria-hidden="true"></span>
            <span aria-hidden="true" class="glyphicon glyphicon-th-list form-control-feedback"></span>
        </div>
    </div>
    <div class="form-group has-feedback">
        <label class="control-label col-xs-5" for="inputSuccess2">my desired result is as following:</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
            <span class="glyphicon glyphicon-th-list form-control-feedback" aria-hidden="true"></span>
            <span aria-hidden="true" class="glyphicon glyphicon-th-list form-control-feedback"></span>
        </div>
    </div>
    <div class="form-group has-feedback">
        <label class="control-label col-xs-5" for="inputSuccess2">my desired result is as following:</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
            <span class="glyphicon glyphicon-th-list form-control-feedback" aria-hidden="true"></span>
            <span aria-hidden="true" class="glyphicon glyphicon-th-list form-control-feedback"></span>
        </div>
    </div>
</form>

您可以根据需要设置宽度

Answer 2

您应该使用输入组。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<form role = "form" style = "padding: 100px 100px 10px;">
      
      <div class = "input-group">
         <input type = "text" class =" form-control">
         <span class = "input-group-addon glyphicon glyphicon-list"></span>
      </div>
   </form>

需要在<textarea>＆lt; input type =＆＃34; text＆＃34;＆gt;中调整bootstrap图标。

2 个答案: