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以显示第二个Heading1。这是基础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-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

1 个答案: