Question

应该很简单，但我看不出问题。我正在构建一个像中心菜单的页面和一个带右侧图标的搜索框，我正在使用keystonejs，pugjs和bootstrap。这是代码中有问题的部分：

div(style='margin-top:60px; width:1000px')
  row
    div.col-md-2.col-md-offset-4.text-left
      a(href='/keystone') Hommes
    div.col-md-2
      a(href='/keystone') Femmes
    div.col-md-2.text-right
      a(href='/keystone') Enfants
    div.form-group.col-md-1.col-md-offset-1
      div.form-group.has-feedback
        input(class='form-control', type='text', id='search-addon')
        i(class='glyphicon glyphicon-search form-control-feedback')

汇编成：

<div style="margin-top:60px; width:1000px;">
      <row>
        <div class="col-md-2 col-md-offset-4 text-left"><a href="/keystone">Hommes</a></div>
        <div class="col-md-2"><a href="/keystone">Femmes</a></div>
        <div class="col-md-2 text-right"><a href="/keystone">Enfants</a></div>
        <div class="form-group col-md-1 col-md-offset-1">
          <div class="input-group has-feedback">
            <input class="form-control" type="text" id="search-addon"><i class="glyphicon glyphicon-search form-control-feedback"></i>
          </div>
        </div>
      </row>

生成的HTML看起来没问题，但显示屏中的图标不包含此fiddle

中的图标

这是它显示的内容

我做错了什么......再次:) 感谢

Answer 1

尝试包装

i(class='glyphicon glyphicon-search form-control-feedback')

在

span.input-group-addon

更多：http://getbootstrap.com/components/#input-groups

例如：

div.form-group.has-feedback
  input(class='form-control', type='text', id='search-addon')
  span.input-group-addon
   i(class='glyphicon glyphicon-search form-control-feedback')

Answer 2

我从

更改了代码

<div class="form-group col-md-2">
    <div class="form-group has-feedback">
        <input class="form-control" type="text" id="search-addon"><i class="glyphicon glyphicon-search"></i>
    </div>
</div>

到

<div class="col-md-1 col-md-offset-1">
                <div class="form-group">
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control"/>
                        <span class="glyphicon glyphicon-search form-control-feedback"></span>
                    </div>
                </div>
            </div>

显示正确。但我发现有些人认为这个问题与强制性标签有关 https://github.com/twbs/bootstrap/issues/12911和https://github.com/twbs/bootstrap/issues/12873

带有图标的搜索框使用bootstrap和哈巴狗在输入下显示图标

2 个答案: