Question

我正在使用bootstrap3格栅系统。我有两个以下输入字段，我想在它们之间放置glyphicon。不幸的是，当我为glyphicon本身分配整个列时，它不起作用。控制之间的差距太大了。

是否可以帮助我在flyFrom和flyTo输入字段之间添加glyphicon。谢谢你的帮助！

HTML：

            <div class="row">
                    <div class="col-md-2">
                            <input type="text" class="form-control input-md" id="flyFrom" placeholder="Country, city or airport">
                    </div>

                    <div class="col-md-1">
                        <span class="glyphicon glyphicon-resize-horizontal"></span>
                    </div>

                    <div class="col-md-3">
                        <input type="text" class="form-control input-md" id="flyTo" placeholder="Country, city or airport">
                    </div>

                    <div class="col-md-2">
                        <div class='input-group date' id='datetimepicker6'>
                            <input type='text' id="depart-date" class="form-control" />
                             <span class="input-group-addon">
                                 <span class="glyphicon glyphicon-calendar"></span>
                             </span>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class='input-group date' id='datetimepicker7'>
                            <input type='text' id="return-date" class="form-control" />
                             <span class="input-group-addon">
                                 <span class="glyphicon glyphicon-calendar"></span>
                             </span>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class='btn-group'>
                            <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">1 Adult<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Adults 12+ years</a></li>
                                <li><a href="#">Children under 12</a></li>
                                <li><a href="#">Children under 2</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <button type='button' class="btn btn-info">Search</button>
                    </div>
                </div>
            </div>

小提琴：

https://jsfiddle.net/z4b2bwg6/8/

Answer 1

抱歉，我首先不理解你的问题！我的坏！

在此示例中，图标应位于两个输入之间：

<div class="input-group input-large">
        <input class="form-control" type="text" name="from">
        <span class="input-group-addon"> <i class="fa fa-calendar"></i>  </span>
        <input class="form-control" type="text" name="to">
    </div>

我希望这会对你有所帮助。

另见这个小提琴：http://jsfiddle.net/0rssd727/1/

Answer 2

<div class="col-md-1">
    <i class="glyphicon glyphicon-resize-horizontal"></i> 
</div>

试试这个？

Answer 3

您可以在第一个输入控件中放置一个内联图标，如下所示：

<div class="input-group ">
     <input type='text' id="return-date" class="form-control input-md" >
         <span class="input-group-addon">
             <i class="fa fa-calendar"></i>
         </span>

两个输入之间的Bootstrap glyphicon

3 个答案: