时间戳

首页 > 解决方案 > 为什么我的引导卡没有并排显示？

html - 为什么我的引导卡没有并排显示？

问题描述

我有以下代码定义两个引导卡：

<div id="detailPanel" class="col-lg-12">
    <div class="col-lg-12">
        <div class="card">
            <div class="col-lg-6">
                <div class="card-header">
                    <div>
                        Detail
                        @if (@Model.ProjectId != default(int))
                        {
                            <text>- Project #</text>
                            @Model.ProjectId
                        }
                    </div>
                </div>
                <div class="card-body">
                    @*Custom fields*@
                    <div class="editor-label">@*Custom fields*@</div>
                    <div class="editor-field wide-editor">
                        @*Custom fields*@
                        <button id="showChooser" class="icon-button-sm">
                            <span class="fas fa-search"></span>
                        </button> <span id="description"></span>
                        @*Custom fields*@
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="col-lg-6">
                <div class="card-header">
                    <p>Financials</p>
                </div>
                <div class="card-body">
                   @*Custom fields*@
                    <div id="purchPanel">
                        @*Custom field*@
                        <div id="realEstatePanel">
                            @*Custom fields*@
                        </div>
                        <div class="editor-label">@Html.LabelFor(model => model.PurchasePrice, "Purchase Price")</div>
                        <div class="editor-field">
                            @Html.EditorFor(model => model.PurchasePrice)
                            <button id="realEstateToggle" class="k-button"></button>
                            @Html.ValidationMessageFor(model => model.PurchasePrice)
                        </div>

                    </div>
                    <div id="refiPanel">@Html.EditorEntryFor(model => model.RefinanceAmount, "")</div>
                    <div class="editor-field" id="equityAssetPanel">
                        @Html.EditorFor(model => model.EquityAssetId)
                        @Html.ValidationMessageFor(model => model.EquityAssetId)
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是页面当前显示的内容： 目标是让它们并排。类似于官方文档中的示例：https ://getbootstrap.com/docs/4.0/components/card/当前的

标签： htmlcsstwitter-bootstraprazorbootstrap-4

解决方案

第一个 - 替换cardand col-lg-6，最后一个应该是父级。第二个封面col-lg-6。row检查下面的示例。

这个来自 Bootstrap 文档的例子很好地说明了它https://getbootstrap.com/docs/4.0/components/card/#using-grid-markup

<div id="detailPanel" class="col-lg-12">
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <div>
                        Detail
                        @if (@Model.ProjectId != default(int))
                        {
                            <text>- Project #</text>
                            @Model.ProjectId
                        }
                    </div>
                </div>
                <div class="card-body">
                    @*Custom fields*@
                    <div class="editor-label">@*Custom fields*@</div>
                    <div class="editor-field wide-editor">
                        @*Custom fields*@
                        <button id="showChooser" class="icon-button-sm">
                            <span class="fas fa-search"></span>
                        </button> <span id="description"></span>
                        @*Custom fields*@
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <p>Financials</p>
                </div>
                <div class="card-body">
                   @*Custom fields*@
                    <div id="purchPanel">
                        @*Custom field*@
                        <div id="realEstatePanel">
                            @*Custom fields*@
                        </div>
                        <div class="editor-label">@Html.LabelFor(model => model.PurchasePrice, "Purchase Price")</div>
                        <div class="editor-field">
                            @Html.EditorFor(model => model.PurchasePrice)
                            <button id="realEstateToggle" class="k-button"></button>
                            @Html.ValidationMessageFor(model => model.PurchasePrice)
                        </div>

                    </div>
                    <div id="refiPanel">@Html.EditorEntryFor(model => model.RefinanceAmount, "")</div>
                    <div class="editor-field" id="equityAssetPanel">
                        @Html.EditorFor(model => model.EquityAssetId)
                        @Html.ValidationMessageFor(model => model.EquityAssetId)
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

推荐阅读