Bootstrap 4 行问题

核心114

我使用过bootstrap 4我尝试制作附加图像类型设计，但正确地它对我不起作用，我使用了网格系统，任何人都知道如何正确地做到这一点

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-section">

  

      <div class="row">
    <div class="col-6"  style="border-right: 2px solid grey; border-bottom: 2px solid grey;">
     <div > <h2>$ 2,300</h2></div>
    </div>
    <div class="col-6" style="border-bottom: 2px solid grey;">
      <div><h2>$ 53,100</h2></div>
    </div>
    <div class="col-6" style="border-right: 2px solid grey;">
<div><h2>12</h2></div>
    </div>
    <div class="col-6">
<div><h2>68%</h2></div>
    </div>
  </div>

扎希杜·伊斯拉姆·鲁赫尔

您可以使用 flex 布局对 Bootstrap 4 进行超级访问，只需使用伪元素 :before/:after 付出额外的努力。

CSS：

.col {
    margin: 1em;
    position: relative;
}

.bottom-border:after {
    content: '';
    width: calc(100% - 1em);
    height: 2px;
    background-color: grey;
    position: absolute;
    box-sizing: border-box;
    bottom: -1em;
    left: 0
}

.right-border:after {
    content: '';
    height: 100%;
    width: 2px;
    background-color: grey;
    position: absolute;
    box-sizing: border-box;
    right: -1em;
    bottom: 0;
}

.left-border:after {
    content: '';
    height: 100%;
    width: 2px;
    background-color: grey;
    position: absolute;
    box-sizing: border-box;
    left: -1em;
    top: 0;
}

.top-border:after {
    content: '';
    width: calc(100% - 1em);
    height: 2px;
    background-color: grey;
    position: absolute;
    box-sizing: border-box;
    top: -1em;
    right: 0
}

和 html：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

    <div class="tab-section text-center">
        <div class="row">
            <div class="col right-border">
                <div>
                    <h2>$ 2,300</h2> Today's Revenue
                </div>
            </div>
            <div class="col bottom-border">
                <div>
                    <h2>$ 53,100</h2>Expected Revenue for this month
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col top-border">
                <div>
                    <h2>12</h2> Bookings taken today
                </div>
            </div>
            <div class="col left-border">
                <div>
                    <h2>68%</h2>Total Monthly occupancy
                </div>
            </div>
        </div>
    </div>

预览链接：https : //codepen.io/ziruhel/pen/EbKByd

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。