Bootstrap 3工具提示包裹在每个空白区域？

Question

升级到bootstrap 3后,工具提示将被包裹在每个空白区域.

我相信这是因为电网而发生的.

因此,如果我为文本框选择列col-sm-3,并且如果我将工具提示放在右边,它将包装所有空格并显示如下.

如果我做数据放置=顶部,那么一切似乎都没问题.

我玩了css以使它工作.

.tooltip-inner { white-space:nowrap; }

但这也是不可接受的,当它比200px更长时它应该换行.

我怎样才能解决这个问题？我想把工具提示放在右边

这是表格

 <div class="form-horizontal"> 
  <div class="form-group">
    @Html.LabelFor(model => model.BasicDescription, new { @class = "control-label col-sm-2" })
    <div class="col-sm-4">
    @Html.TextBoxFor(model => model.BasicDescription, new { @class = "tip form-control", data_toggle = "tooltip", title = "Please enter a short description here, exceeding no more than 100 characters", data_placement = "right" })
    @Html.ValidationMessageFor(model => model.BasicDescription)
    </div>
  </div>
</div

Answer 1

你可以像这样指定一个最小宽度..

 .tooltip {min-width:200px;}

演示:http://www.bootply.com/kFfEAk0m1O

Answer 2

不要设置最小宽度，而是考虑删除最大宽度限制：

.tooltip-wide .tooltip.bottom, .tooltip-inner  {
  max-width: none;
}

<a [tooltip]='acctTooltip' class='tooltip-wide' placement='bottom'>blah blah</a>

（tooltip-wide是为了防止css影响其他tooltip）