1

我正在尝试使用 input-group Bootstrap 3.3.7 类获得一个漂亮的表单，但是出了点问题。

我想我已经编写了正确的输入组结构：主 div 包含其他三个元素，一个输入组插件，一个输入表单，最后一个输入组按钮（里面有东西）。

我的问题是第三个元素打破了高度主 div，导致 input-group-addon 比其他 input-group 元素大几个像素。

我的代码：

<div class="col-xs-12 col-md-6">
    <div class="input-group">
        <span class="input-group-addon" id="sizing-addon2">Artículo</span>
        <ng2-completer [(ngModel)]="bus.articuloName" (selected)="artSelected($event)" [matchClass]="'match'" [placeholder]="'Nombre de Articulo'" [datasource]="artService" [textNoResults]="'No hay coincidencias'"></ng2-completer>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" (click)="init('art')">
                X
            </button>
        </span>
    </div>
</div>

我的结果：

在此处输入图像描述

没有输入组按钮，代码可以正常工作，但我真的需要这第三个元素。我尝试使用 glyphicons 和 btn-link 而不是 btn-default ......而且我得到了错误的高度（与图片不完全相同的结果）。

顺便说一句，我在表单中有 7 个输入组，4 个正常工作，3 个有这个问题，所以不应该有 CSS 继承问题或类似的问题。

有谁知道问题出在哪里？

4

1 回答 1

0

您的输入是否由具有 Angular 类的 Angular 渲染form-control？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-12 col-md-6">
  <div class="input-group">
    <span class="input-group-addon">Artículo</span>

    <input type="text" class="form-control" placeholder="Nombre de Articulo">

    <span class="input-group-btn">
        <button class="btn btn-default" type="button">X</button>
    </span>

  </div>
</div>

于 2018-11-30T15:15:23.667 回答