Question

使用MVC 5和bootstrap。我有一个有两行的视图。顶行有两列。为什么当页面完成时，右栏似乎比左栏略低？此外，第二行（底部）不如第一行（顶部）宽。我试过制作自定义类，我尝试添加和删除div标签的各种属性，但问题仍然存在。

以下代码。任何帮助将不胜感激。

@model MVCConv.Models.House


<div class="row">
    <div class="col-md-12">
        <h3>@Html.DisplayFor(model => model.Name)</h3>
    </div>
</div>

@{
    var pageDescription = Model.Page_Description.ToString();
    var isHtmlDescrption = Model.isHTML;
}

<div class="row">

    <div class="col-md-2 container-fluid full-width">
        <div class="MyCustomClass">Contact Info</div>

        <dl class="dl-horizontalus">
            <dt>
                @Html.DisplayNameFor(model => model.Name)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Name)
            </dd>

            <dt>
                Site URL:
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Site_URL)
            </dd>

            <dt>
                Contcat Name:
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Contact_Name)
            </dd>

            <dt>
                Email Address:
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Contact_Email)
            </dd>

            <dt>
                Contact Phone:
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Contact_Phone)
            </dd>
        </dl>

        <div class="MyCustomClass">Special Offers</div>
        <div class="whiteCellus">@Html.DisplayFor(model => model.Special)</div>

    </div>

    <div class="col-md-10 panel-body container-fluid full-width">
        <div class="MyCustomClass">About the House</div>

        @if (Convert.ToBoolean(isHtmlDescrption))
        {@Html.Raw(pageDescription)}
        else
        {@Html.Raw(pageDescription.Replace(Environment.NewLine, "<br/>"))}

    </div>
</div>

<hr />

<div class="col-md-12 container-fluid full-width">
    <div class="MyCustomClass">History</div>
    @{
        using (var context = new MVCConv.Models.Houses())
        {
            var record = context.ImportedSP(Model.HouseID).ToList();
            @Html.Partial("_PartialPage", record
        }
    }
        </div>

Answer 1

将页面分开并试用并错误但删除div以确定哪一个导致列不均匀...

面板体是问题的根本原因。当我删除它时，列对齐到顶部，所有行也对齐并占据整个屏幕宽度。

MVC视图列不以相同高度开始

1 个答案: