Bootstrap输入标签溢出面板主体

Question

我的项目中有以下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但我在网上找到的这些解决方案都没有为我工作。

有人可以建议我还能尝试什么吗？

Answer 1

尝试使用float:left代替display:inline-block

Answer 2

Panel已经保留继承父级。所以你不需要将max-width设置为100％。但是，如果您正在尝试确保按钮将覆盖所有行，并且如果溢出则从新行开始。您可以在max-width内删除panel-body或添加列定义代码，这来自Bootstrap Grid。

<div class=col-xs-12>

Answer 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>

Answer 4

尝试使用bootstrap的collumn网格，可能你不需要对它应用任何样式..

但如果你提供一个小提琴，那就更好了，这样我们可以为你提供更好的帮助！