MVC 5 Razor Page中的HTMl布局使用bootstrap css没有显示我想要的方式

Question

我在尝试让事物正确排列并显示在同一行时遇到了很多麻烦。我正在使用带有 HTML 和 Bootstrap.css 文件的 MVC 5 剃须刀页面。我已经摆弄了几天，现在从我开始的地方取得了有限的进展。我会发布任何其他需要的内容来帮助我解决这个问题 - 表格中有更多的部门 - 但我想尽可能简短。

这是我不想要的和我想要实现的屏幕截图：

这是我的标记代码：

    <table style="width: 1562px; height: 836px;" cellpadding="1"; cellspacing="0"; border="1"; >

        <caption class = "control-label col-md-2", style = "display:inline; white-space:nowrap">
            @Html.DisplayFor(model => model.Title)<br>
        </caption>
       <tbody>
            <tr>

                @*SECTION TITLE MODIFIED .. CATEGORY*@
                <td colspan="1" rowspan="4" style="vertical-align: middle; width: 244px; margin-left:4px" class="form-horizontal" >
                    <br>
                    <ul style="color: blue; list-style-type: none; list-style-image: none; list-style-position: outside; width: 260px;" class="form-horizontal">
    <li>

        @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })

        @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })

    </li>
    <li>

        @Html.LabelFor(model => model.PublishDate, htmlAttributes: new { @class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })

        @Html.EditorFor(model => model.PublishDate, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.PublishDate, "", new { @class = "text-danger" })


    </li>
    <li style="display:inline-block; width:auto">

        <div class="form-horizontal">
            @Html.LabelFor(model => model.ModifiedDate, htmlAttributes: new { @class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })
            <div  style="width:50%">
                @Html.EditorFor(model => model.ModifiedDate, new { htmlAttributes = new { @class = "form-control" , style= "width:50%" } })
                @Html.ValidationMessageFor(model => model.ModifiedDate, "", new { @class = "text-danger", style = "width:50%" })
            </div>


        </div>
</li>
    <li>  <p style="display:inline-block">

        <div class="form-horizontal" id="isActive">
    @Html.LabelFor(model => model.IsActive, htmlAttributes: new { @class = "control-label col-md-1" })
</div>
    <div class="checkbox" style="align-items:flex-end;">
        @Html.EditorFor(model => model.IsActive)
        @Html.ValidationMessageFor(model => model.IsActive, "", new { @class = "text-danger" })
    </div>

</p> 

        <br style="line-height:20px" />
</li>

    <li> <p>

             <div class="form-horizontal" id="ddlCategoryGroup" style="display:inline-block;white-space:nowrap;">
                 &nbsp; 
                 @Html.LabelFor(model => model.CategoryId, "Category", htmlAttributes: new { @class = "control-label col-md-2" })
</div>
                 <br style="line-height:25px;" />
<p>
        <div class="col-md-10" id="ddlCategory">
            &nbsp;   
            @Html.DropDownList("CategoryId", null, htmlAttributes:
                                                 new { @class = "form-control", style = "font-family:'Franklin Gothic Medium', 'ArialNarrow', Arial, sans-serif; font-size:1.2EM; width:auto; display:inline; white-space:nowrap" })
            &nbsp;    
            @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
        </div>
            </p><br/>

        <p style="display:inline-block">
            <div>
                &nbsp;&nbsp;&nbsp;
                @Ajax.ActionLink("New", "Create", "Category", Model.Category,
     new AjaxOptions { UpdateTargetId = "ddlCategory", InsertionMode = InsertionMode.Replace },
     new { htmlAttributes = new { @class = "control-label col-md-2" } }) |
                @Ajax.ActionLink("Edit", "Edit", "Category", Model.Category,
     new AjaxOptions { UpdateTargetId = "ddlCategory", InsertionMode = InsertionMode.Replace },
     new { htmlAttributes = new { @class = "control-label col-md-2" } }) |
                @Html.ActionLink("Delete", "Delete", new { id = @Model.CategoryId }, new { htmlAttributes = new { @class = "control-label col-md-2" } })

            </div>
        </p>

</p>
</li>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>

Answer 1

对于“发布时间”和“上次修改时间”输入字段，您可以尝试在引导程序中使用 flex 类。

<div class="d-flex">
 <input type="text" />
 <button><i class="fa fa-calendar"></i></button>
</div>    

1.bootstrap doc flex

2.Here is a cheat sheet for flex boxes

Answer 2

我更喜欢使用引导类和 div 元素，而不是使用表格和列表元素进行设计，因为它们可以让您更好地控制自己在做什么。看看下面的代码。

首先用 form-horizo​​ntal 类创建一个父 div，然后为每个输入创建一个 form-group

类的 div

<div class="form-horizontal">
    <h4>Write a Suitable title for your Form</h4>
    <hr />
       <div class="form-group"> @*Create this div for each form input element*@
                @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-6"> @*Based on your requirement you can change the col-md-3 value any where from 1 to 10*@

                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })

            </div>
      </div>
</div>

如你所见

1. 对于完整的表单，我们有一个 div 父类 form-horizo​​ntal
2. 对于每个输入元素，我们将有一个表单组 div 类
3. 在每个表单组中，我们将有 2 个元素标签和一个带有 col-md-6 类（或您喜欢的任何长度）的 div，其中包含主要输入元素（文本框、下拉菜单、复选框等）

所以停止使用 li 元素并将它们替换为带有 class form-group 的 div 将为您解决许多问题。