css - Bootstrap 3 工具提示被包裹在每个空白处？

Question

升级到 bootstrap 3 后，工具提示会包裹在每个空白处。

我相信这是因为网格而发生的。

因此，如果我为文本框选择列 col-sm-3 并且如果我将工具提示放在右侧，它会包裹所有空白并显示如下。

如果我执行 data-placement=top 那么一切似乎都很好。

我尝试使用 css 让它工作。

.tooltip-inner { 空白:nowrap； }

但是当它比我们说的 200px 长时它应该换行也是 Not Acceptable 。

我该如何解决这个问题？我想将工具提示放在右边

这是表格

 <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