1

它应该很简单，但我看不到问题所在。我正在中心构建一个类似菜单的页面，在右侧构建一个带有图标的搜索框，我正在使用 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 看起来不错，但显示不包括输入中的图标，就像在这个小提琴中一样

这是它显示的内容 在此处输入图像描述

我在做什么错......再次:)谢谢

4

2 回答 2

0

尝试包装

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')
于 2017-05-02T21:36:10.150 回答
0

我将代码从

<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

于 2017-05-03T17:32:06.510 回答