twitter-bootstrap – Bootstrap工具提示需要单行

发布时间：2020-12-18 00:27:16 所属栏目：安全来源：网络整理

导读：我已经使用引导创建了一个工具提示,用于下拉列表控件.它显示工具提示. 但是由于此控件绑定在class =“col-sm-4”中,工具提示文本被打破为新行.但我希望在一条线上显示.有什么想法吗？ div class="col-sm-4" select class="form-control" id="ddlSchoolAttend

我已经使用引导创建了一个工具提示,用于下拉列表控件.它显示工具提示.
但是由于此控件绑定在class =“col-sm-4”中,工具提示文本被打破为新行.但我希望在一条线上显示.有什么想法吗？

<div class="col-sm-4">
                <select class="form-control" id="ddlSchoolAttended" data-toggle="tooltip" data-placement="right" title="Some tooltip 2!Some tooltip 2!Some ">
          <option value="08">08 -Year 8 or below</option>
    <option value="09">09 -Year 9 or equivalent</option>
    <option value="10">10 -Completed Year 10</option>
    <option value="11">11 -Completed Year 11</option>
    <option value="12">12 -Completed Year 12</option>
    <option selected="selected" value="">--Not Specified--</option>
          </select><br/>
</div>

解决方法

.tooltip-inner {
  white-space:nowrap;
  max-width:none;
}

在Bootstrap CSS之后将其添加到您的CSS.然而,使用右侧的悬停,即使是正确的自动,将会在较小的视口上关闭屏幕,但是由于较小的视口通常会触摸,因此悬停可能会使双重工作.我通常使用脚本检测IOS,Android和Windows手机的触摸,然后只使用无触摸设备上的工具提示,因此这不会干扰用户轻击.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!