html - 如何设置我的设计，使每 3 个控件显示在一行中，每个控件上方都有标签？-6ren

html - 如何设置我的设计，使每 3 个控件显示在一行中，每个控件上方都有标签？

转载作者：行者123 更新时间：2023-11-28 00:06:39

我正在尝试以一种方式安排我的表单，使每 3 个控件显示在一行中，并在其上方添加标签。

我试过了，但它是垂直的。我是设计新手。

@using (Html.BeginForm("Create", "InspectionReport", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="form-horizontal">

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.VelosiProjectNo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.TextBoxFor(model => model.InspectionReport.VelosiProjectNo, new { @class = "form-control"})
                @Html.ValidationMessageFor(model => model.InspectionReport.VelosiProjectNo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.VelosiReportNo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.VelosiReportNo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.VelosiReportNo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.Reference, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.Reference, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.Reference, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.PoNo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.PoNo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.PoNo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.InspectionDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.InspectionDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.InspectionDate, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.IssueDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.IssueDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.IssueDate, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.InspectionPhase, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.DropDownListFor(model => model.InspectionReport.InspectionPhase, new List<SelectListItem>
                   {
                     new SelectListItem { Text = "Before", Value = "0"},
                     new SelectListItem { Text = "During", Value = "1"},
                     new SelectListItem { Text = "Final", Value = "2"}
                  }, "-Select-",
                  new
                  {
                      @Style = "Width:500px;height:40px;",
                      @class = "form-control input-lg"
                  })
                @Html.ValidationMessageFor(model => model.InspectionReport.InspectionPhase, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.InServiceInspection, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.CheckBoxFor(model => model.InspectionReport.InServiceInspection )
                @Html.ValidationMessageFor(model => model.InspectionReport.InServiceInspection, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.NewInduction, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.CheckBoxFor(model => model.InspectionReport.NewInduction)
                @Html.ValidationMessageFor(model => model.InspectionReport.NewInduction, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.HydrostaticTest, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.CheckBoxFor(model => model.InspectionReport.HydrostaticTest)
                @Html.ValidationMessageFor(model => model.InspectionReport.HydrostaticTest, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.DimensionalCheck, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.CheckBoxFor(model => model.InspectionReport.DimensionalCheck)
                @Html.ValidationMessageFor(model => model.InspectionReport.DimensionalCheck, "", new { @class = "text-danger" })
            </div>
        </div>



        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.OmcClientRequirement, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.CheckBoxFor(model => model.InspectionReport.OmcClientRequirement)
                @Html.ValidationMessageFor(model => model.InspectionReport.OmcClientRequirement, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.TankLorryRegistrationNo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.TankLorryRegistrationNo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.TankLorryRegistrationNo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.TruckTractorManufacturerName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.TruckTractorManufacturerName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.TruckTractorManufacturerName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.ClientName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.ClientName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.ClientName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.Capacity, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.Capacity, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.Capacity, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.Omc, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.Omc, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.Omc, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.EngineNo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.EngineNo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.EngineNo, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.TankLorryDimension, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.TankLorryDimension, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.TankLorryDimension, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.ChassisNo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.ChassisNo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.ChassisNo, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.InspectionPlace, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.InspectionPlace, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.InspectionPlace, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.TankLorryEnginePower, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.TankLorryEnginePower, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.TankLorryEnginePower, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.CarriageName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.InspectionReport.CarriageName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.CarriageName, "", new { @class = "text-danger" })
            </div>
        </div>
              <div class="form-group">
            @Html.LabelFor(model => model.InspectionReport.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.TextAreaFor(model => model.InspectionReport.Description, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InspectionReport.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <label> @ViewBag.Error</label>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-2">
                <button class="btn btn-success btn-outline btn-block" type="submit"><i class="fa fa-save" style="font-size:medium"></i>  Add</button>
            </div>
            <div class="col-md-2">
                <button class="btn btn-default btn-block" type="button" onclick="window.location.href='@Url.Action("Index","Certificates")'"><i class="fa fa-remove" style="font-size:medium"></i>  Cancel</button>
            </div>
        </div>

    </div>
}

有什么办法可以实现吗？我尽力了，但似乎没有按顺序进行。我在 html 中使用 bootstrap 3 和 css，但没有任何效果。我想我做错了。

最佳答案

使用下面的代码:

 <div class="panel-body">
   <div class="row margin-0">
     <div class="form-group">   
               <div class="col-md-3 col-sm-3 col-xs-6 standard-padding">
                    <div class="form-group">
                        @Html.LabelFor(model => model.InspectionReport.VelosiProjectNo, htmlAttributes: new { @class = "label-field" })
                        @Html.TextBoxFor(model => model.InspectionReport.VelosiProjectNo, new { @class = "form-control"})
                        @Html.ValidationMessageFor(model => model.InspectionReport.VelosiProjectNo, "", new { @class = "text-danger" })
                    </div>
                </div>

               <div class="col-md-3 col-sm-3 col-xs-6 standard-padding">

                         <div class="form-group">
                        @Html.LabelFor(model => model.InspectionReport.VelosiReportNo, htmlAttributes: new { @class = "label-field" })
                        @Html.EditorFor(model => model.InspectionReport.VelosiReportNo, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.InspectionReport.VelosiReportNo, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="col-md-3 col-sm-3 col-xs-6 standard-padding">

                    <div class="form-group">
                        @Html.LabelFor(model => model.InspectionReport.Reference, htmlAttributes: new { @class = "label-field" })
                        @Html.EditorFor(model => model.InspectionReport.Reference, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.InspectionReport.Reference, "", new { @class = "text-danger" })
                    </div>
                </div>
         </div>
      </div>
   </div>

关于html - 如何设置我的设计，使每 3 个控件显示在一行中，每个控件上方都有标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55674048/

文章推荐： c++ - 有没有办法在 void 函数中结束程序？

文章推荐： html - metroUI css 将图标显示为控制字符

文章推荐： html - 位于网站两个部分之间的图片

文章推荐： python - 是否可以在 Gtk 中更改单选按钮颜色？

objective-c - 如何在一个实体(控件)中组合多个 iOS 控件？
我想实现自定义搜索，但遇到了一个麻烦。我需要将 UIButton、SearchBar 组合在一个控件中，以便我可以通过指针引用它。然后我将向该组合控件动态添加更多 UIbutton。最重要的是，我想将
c# - 从母版页的代码后面访问 RadEditor 控件...当它存在时找不到任何 radEditor 控件...有什么问题吗？
它没有在我的方法中执行 if block 中的语句母版页:- 页面加载事件:- Control c = new Control(); DoSomething(c); 我的方法:- protecte
java - ListView 控件(如 ComBox 控件)中 setConverter 的等效项在哪里？
ComboBox 控件有一个 setConverter 方法，请参阅 JavaFX ComboBox - Display text but return ID on selection举个例子。我正在
用于标记化的 WPF 控件
我没有找到任何包含用于标记化(标记)文本输入的控件的 wpf 库。也许我找不到库，因为我错误地调用了这个组件。怎么叫或者哪里有这样的库？最佳答案 DevExpress WPF 库包含多个数据编辑控件
带有代码高亮显示的 Silverlight 控件？
是否有 Silverlight 控件允许您输入文本并将其突出显示为代码？例如: foreach (client in Clients){ client.Save();} would become
WPF TopMost 控件
我有以下用户控件 a) Panel.ZIndex="99999999" 是否是将此控件设置为该控件中 TopMost 的正
C# 隐藏所有标签/控件
是否可以在 Windows 窗体中使用 C# 在窗体加载时隐藏所有特定控件，例如标签或按钮，然后选择显示我不想显示的那些？我有一个包含很多按钮和标签的程序，但我只想在加载时显示一两个，我觉得对每个标
delphi - 如何复制组件/控件？
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Duplicating components at Run-Time 我有一个TMyControl ( Contro
delphi - 控件 'xxx'没有父窗口
我正在尝试在 Delphi 中编写一个 dll 库，其中包含一个创建 TFrame 后代实例并返回它的函数。但是当我在应用程序中导入这个函数时，每次调用它时，我都会得到一个异常，例如“'xxx'控件没
winapi - 如何检测屏幕上特定点的窗口/控件？
是否有 Win32 API 调用来确定哪些窗口和/或控件在特定坐标和/或鼠标下可见？最佳答案您可以使用GetWindowFromPoint 。它将返回窗口句柄，以便您可以使用 GetClassNa
接受数学公式作为输入的 WinAPI 控件
我需要在编辑控件中输入以下公式: 公式是在 MS Word 中制作的。尝试将其复制/粘贴到编辑控件(单行或多行)后，我得到 M 0.33 Q10T9.1-9.7。当我输入这个时，我正在研究 Rich
创建 IWebBrowser2 控件
我只是想成功地将它添加到我的窗口中，但这却出奇地困难。我已经尝试过 #include "windef.h" #include "winbase.h" #include "initguid.h" #i
javascript - 自定义街景按钮/控件
我希望能够使用 google maps api v3 拥有自己的“街景”按钮。单击按钮时，我希望它根据我的标记经纬度加载街景。然后我希望按钮更改为“返回 map ”，然后再次加载默认 map View
PHP - Javascript 控件
我目前正在用 PHP 开发(另一个)开源 CMS，我想使用 javascript 控件，尤其是管理面板。问题是，是否有任何具有 PHP 接口(interface)的开源、可自由分发的控件(用于创建 j
PostgreSQL VCL 控件
我为其编写软件的产品之一是会计类应用程序。它用 C++ 编写，使用 C++ Builder 和 VCL 控件，连接到运行在 Linux 上的 PostgreSQL 数据库。 PostgreSQL 数据
Java KeyListener 控件
我使用 Key Listener 来读取用户的输入，但我遇到了问题。首先，我读到 JTextField“请输入您的姓名”。如果用户输入一个名字，例如 John，它将更改为 John。但是，如果用户输入
css - 如何对齐数据表列中的文本/控件？
我正在尝试对齐数据表列中的复选框(h=center，v=middle) ... 但复选框仍然显示在错误的位置(见附图)
用于深入了解统计树的 JavaScript 控件
我有一个包含统计信息的 JSON 数据树: { prefix: "a", count: 20, children: [ { prefix: "a:b", c
c# - ListView 控件
我在 Photoshop 中设计了一个模型，我打算将它应用到我的产品目录的 ListView 控件中，但它似乎没有正确显示(未对齐？)，我希望这里的人可以像我一样指出我的错误试图弄清楚无济于事。预期
ASP.NET 控件
您是使用 ASP.NET 控件还是仅使用带有 CSS 的 HTML？我在 TextBox 和 DropDownList 的宽度方面遇到了一些问题。在不同的浏览器中，宽度会有所不同，控件的大小也不会相

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何设置我的设计，使每 3 个控件显示在一行中，每个控件上方都有标签？