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

你试试这个。

.text-nowrap {
    white-space: nowrap;
}

Answer 2

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

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

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

Answer 3

.text_no_wrap{
    white-space : nowrap;
}

此外，您没有关闭form代码。

Bootstrap文本nowrap类没有响应

3 个答案: