引导输入标签溢出面板主体答案

【问题标题】：Bootstrap input tags overflowing panel body引导输入标签溢出面板主体
【发布时间】：2020-12-24 16:57:26
【问题描述】：

我的项目中有以下panel：

如您所见，它存在严重问题......即bootstrap 输入标签决定溢出并超出panel。

我的问题是，当给定行上没有足够的空间时，我怎样才能让它换行到下一行...

我有以下html：

  <div class="panel-body">
      <div style="max-width:100%">
         <span *ngFor="let hobbie of sport.hobbies" class="label label-success" style="padding:2%; margin-right:1%">{{hobbie.name}}</span>
      </div>
  </div>

我尝试设置max-width、display:inline-block、word-wrap: break-word，但我在网上找到的这些解决方案都没有为我工作。

谁能建议我还能尝试什么？

【问题讨论】：

请添加一个工作小提琴。
添加代码，否则很难推测出什么问题。

标签： html css twitter-bootstrap-3

【解决方案1】：

尝试float:left 而不是display:inline-block

【讨论】：

【解决方案2】：

面板将一直继承给父级。所以你不需要将 max-width 设置为 100%。但是，如果您要确保按钮将覆盖所有行并在溢出时从新行开始。您可以摆脱max-width 或在panel-body 中添加列定义代码，这来自Bootstrap Grid。

<div class=col-xs-12>

【讨论】：

【解决方案3】：

如果你这样做会怎样

  <div class="panel-body">
      <div class="col-xs-12">
         <span *ngFor="let hobbie of sport.hobbies" class="label label-success" style="padding:2%; margin-right:1%">{{hobbie.name}}</span>
      </div>
  </div>

【讨论】：

【解决方案4】：

尝试使用引导程序的柱状网格，您可能不需要对其应用任何样式..

但如果你提供一个小提琴会更好，这样我们可以更好地帮助你！

【讨论】：