Question

在以下code中，glyphicon glyphicon-info-sign位于TextField之下，我只是想知道如何移动TextField旁边右侧的图标？

Answer 1

概述：</form>位置不正确，表单不正确（不需要将表单包装在ul中，然后在两者上添加相同的类），错误的类（输入组不是表单组）零件。如果您在工具提示或弹出窗口中使用html，请使用data-html =“true”。缩进并评论您的代码。时间缝合节省九，你知道......

DEMO：https://jsbin.com/licawu/1/

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="{{ url_for('index') }}">Trdy</a>
      </div>
      <!--/.navbar-header -->
      <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
            <li id="home-url"><a href="{{ url_for('index') }}">Home</a></li>
            <li id="about-url"><a href="#about">About</a></li>
            <li id="contact-url"><a href="#contact">Contact</a></li>
         </ul>
         <!--/.navbar-nav -->
         <form class="navbar-form navbar-right" method="get" action="{{ url_for('quick_search')}}" role="form">
            <div class="input-group">
               <input class="form-control" type="text"  name="quick_search" id="quick_search" placeholder="Search" type="submit"> 
               <span class="input-group-addon">
               <a href="#" class="my-tool-tip" data-toggle="tooltip" data-placement="left" data-html="true" title="Tooltip here <BR> Hello"> 
               <span class="glyphicon glyphicon-info-sign"></span>
               </a>
               </span>
            </div>
            <!--/.input-group -->
         </form>
      </div>
      <!--/.nav-collapse -->
   </div>
   <!--/.container -->
</div>
<!--/.navbar -->

Answer 2

text-field div和icon类目前是block元素，因此它们占据了容器的整个宽度。因此，您需要将它们更改为例如inline-block元素：

Updated code demo

如您所见，我添加了以下代码。这只是一种方法：

#quick_search {
    display: inline-block;
    width: 90%;
}

.input-group-addon {
 display: inline-block;
    width: 9%;
}

TextField旁边的`glyphicon glyphicon-info-sign`

2 个答案:

DEMO：https://jsbin.com/licawu/1/