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

面板將已經繼承給父級。 所以你不需要將 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 的列網格，可能您不需要對其應用任何樣式。

但是如果您提供小提琴會更好，這樣我們就可以更好地幫助您！