Question

我使用的是Bootstrap 3.3.4，我希望在表单标签的右侧包含通过glyphicons触发的弹出窗口。但是，当标签超过一行文本时，glyphicon将被推送到下一行。请参阅BootPly。

如何实现所需的效果，即 - 不管标签生成多少行文本，glyphicon应紧跟标签文本的末尾？

需要注意的一点是，我使用.NET MVC Core 1.0 TagHelpers来创建label和自定义<asp-popover>和<asp-popover-body>标记。这可能会限制允许的HTML的表现力，因为我无法在label标记内放置任何内容而不会完全替换我的标签文本。

Answer 1

您可以将display:inline;添加到<label>和<asp-popover>代码。

  <div class="form-group">
    <label for="TimeBetweenProducts" style="display:inline;">This label is much longer and will wrap to a new line. The resulting 100% width inline-block label causes the glyphicon to appear on its own line</label>
    <asp-popover style="display:inline;"><i title="" class="glyphicon glyphicon-info-sign" data-original-title="" data-toggle="popover" data-popover-content="#TimeBetweenProducts" data-container="body" data-placement="top">
      </i>
    </asp-popover>
    <input class="form-control" type="text">
  </div>

标签右边的Glyphicon错误地包裹到下一行？

1 个答案: