在 bootstrap 中垂直拆分 div

Question

我正在努力完成一项相当简单的任务，但缺乏 CSS 经验让我变得更好：

<div class="row">
    <div class="col-lg-3">
        <div class="ibox-content m-b-sm border-bottom">
            <div class="ibox-title">
                <span class="label label-info pull-right">Offline</span>
                <h5>Equipment Pass</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">@Model.AirportPassEquipmentOffline.TransactionCount</h1>
                <small># of Transactions</small>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="ibox-content m-b-sm border-bottom">
            <div class="ibox-title">
                <span class="label label-success pull-right">Online</span>
                <h5>Equipment Pass</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">@Model.AirportPassEquipmentOnline.TransactionCount</h1>
                <small># of Transactions</small>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="ibox-content m-b-sm border-bottom">
            <div class="ibox-title">
                <span class="label label-info pull-right">Offline</span>
                <h5>Visitor Pass</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">@Model.AirportPassVisitorOffline.TransactionCount</h1>
                <small># of Transactions</small>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="ibox-content m-b-sm border-bottom">
            <div class="ibox-title">
                <span class="label label-success pull-right">Online</span>
                <h5>Visitor Pass</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">@Model.AirportPassVisitorOnline.TransactionCount</h1>
                <small># of Transactions</small>
            </div>
        </div>
    </div>
</div>

以上是我的观点。喜欢的还有很多：

我想拆分最小的 div 以显示第二个标题 1。这是基础 HTML:

            <div class="ibox-content">
                <h1 class="no-margins">@Model.AirportPassEquipmentOffline.TransactionCount</h1>
                <small># of Transactions</small>
                <h1 class="no-margins">@Model.AirportPassEquipmentOffline.Income</h1>
                <small>Income generated</small>                 
            </div>

目标：

我需要显示更多信息，我看到 div 卡片右侧是空的。我想把这个 div 一分为二。尝试 bootstrap 类，布局中断。

Answer 1

经过反复试验，我意识到小网格 class 是问题所在。我切换到 class-md 并得到了想要的结果。所以这个：

<div class="ibox-content">
    <h1 class="no-margins">@Model.AirportPassEquipmentOffline.TransactionCount</h1>
    <small># of Transactions</small>
    <h1 class="no-margins">@Model.AirportPassEquipmentOffline.Income</h1>
    <small>Income generated</small>                 
</div>

变成了这个：

<div class="ibox-content">
    <div class="row">
        <div class="col-md-6">
            <h1 class="no-margins">@Model.AirportPassEquipmentOnline.TransactionCount.ToString("N0")</h1>
            <small># of Transactions</small>
        </div>
        <div class="col-md-6">
            <h1 class="no-margins">AED @Model.AirportPassEquipmentOnline.Income.ToString("N2")</h1>
            <small>Revenue generated</small>
        </div>
    </div>
</div>

在 bootstrap 中垂直拆分 div

Split a div inside bootstrap vertically

html

twitter-bootstrap-3

asp.net-mvc-5.2