Bootstrap 文本 nowrap 类不响应

Question

我正在为我的标签之一使用 text-nowrap 类，以防止它在正常的桌面视图中换行。但是，当我尝试调整浏览器大小以检查响应能力时，它失败了。标签位于我的输入字段后面。

下面是我的 HTML 代码

<form role="form" class="form-horizontal">
  <div id="box" class="box-body" role="dynamic-fields">
     <div class="inline-form" id="inline-form">
        <div class="row clone">
           <div class="col-md-6">
              <div class="form-group">
                 <label style="" for="inputPackageName" class="col-sm-3 control-label">Package
                    Name </label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="inputPackageName" placeholder="Package Name">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
              <div id="sample" class="form-group">
                 <!-- style="margin-left: -8%;" -->
                 <label for="inputApplicationName"
                 class="col-sm-3 control-label text-nowrap">Application Name</label>
                 <div class="col-sm-8">
                    <input type="text" class="form-control" id="inputApplicationName"
                    placeholder="Package Name">
                </div>
                <button id="btn-close" class="btn btn-box-tool closebutton">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
    </div>
</div>
</div>
</form>

关于如何解决这个问题有什么想法吗？

Answer 1

Bootstrap.text-nowrap类完全按照预期工作。当您将其添加到时，label即使包含的文本超出元素大小，它的内容也不会换行。这就是您希望它在某些屏幕宽度上执行的操作。如果我理解正确的话，您只是希望它在某些显示尺寸上表现不同（不换行）。不幸的是，Bootstrap 的 CSS 不包含断点特定的 CSS 类.text-nowrap。您可以像这样实现您自己的特定 CSS：

@media (min-width: 576px) and (max-width: 992px) {
    .text-nowrap {
        white-space: normal !important;
    }
}

您可以根据需要使用min-width和属性。max-width