时间戳

首页 > 解决方案 > MVC 5 Razor Page中的HTMl布局使用bootstrap css没有显示我想要的方式

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

问题描述

我在试图让事情正确排列并在同一行中呈现时遇到了很多麻烦。我正在使用带有 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>

标签： htmlcssasp.net-mvcrazorbootstrap-4

解决方案

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

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

1.引导 doc flex

2.这是弹性盒子的备忘单

推荐阅读