html - 使用引导CSS的MVC 5 Razor Page中的HTMl布局未显示我想要的方式

我在尝试使事情正确排成一行并显示在同一行时遇到了很多麻烦。我正在使用带有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>

最佳答案

对于“发布日期”和“最后修改时间”输入字段，您可以尝试在引导程序中使用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