html - Bootstrap - 带有多个单词的标签被分成多行

问题描述

所以我有一个表单，在 ASP.NET 视图中有几个输入和它们的标签，但是多个单词的标签会被分成多行（如果它是一个很长的单词，那么长度不应该）不是问题），我想把它作为一条线。

这是一个例子：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />


        <div class="container">
            <div class="row ">

               <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                @Html.LabelFor(model => model.MyAttr,"MyLabel", htmlAttributes: new { @class = "control-label col-md-1 label-operation" })
                                <div class="col-md-12">
                                    @Html.EditorFor(model => model.MyAttr, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.MyAttr, "", new { @class = "text-danger" })
                               </div>
                            </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="form-group">
                        @Html.LabelFor(model => model.MyAttr2, "My Label Two", htmlAttributes: new { @class = "control-label col-md-1 label-operation" })
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.MyAttr2, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.MyAttr2, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

（label-operation CSS 类是我自己的，目前它只设置了 font-size）

.label-operation {
    font-size: 12px;
}

更新

正如建议的那样，我之前尝试过不同的 col-md 值，接下来会发生：

标签： htmlcssbootstrap-4

我看过你的代码也许这是因为你在代码中使用了“col-md-1”类，它使标签和其他设备的宽度响应，但在桌面浏览器上却没有。

 @Html.LabelFor(model => model.MyAttr2, "My Label Two", htmlAttributes: new { @class = "control-label label-operation" })

html - Bootstrap - 带有多个单词的标签被分成多行

问题描述

解决方案

推荐阅读