引导：在拆分框3的

Question

目前我有这样的HTML这就是块：

<div class="info-box-content"> 
    <span class="info-box-text">CPU Traffic</span> 
    <span class="info-box-number">{!! $cpuUseage !!}<small>%</small></span> 
</div> 

上面的框当前显示这样的 - 所看到here：

我怎么能把这个盒子分成3个独立的盒子，这样我可以在一个盒子里显示更多的知识数据？

Answer 1

使用Bootstrap grid system。

<div class="info-box-content row"> 
    <div class="col-md-4"> 
    <span class="info-box-text">CPU Traffic</span> 
    <span class="info-box-number">10<small>%</small></span> 
    </div> 
    <div class="col-md-4"> 
    <span class="info-box-text">RAM Traffic</span> 
    <span class="info-box-number">50<small>%</small></span> 
    </div> 
    <div class="col-md-4"> 
    <span class="info-box-text">HDD Traffic</span> 
    <span class="info-box-number">90<small>%</small></span> 
    </div> 
</div> 

Answer 2

您将不得不使用网格。这里是一个有用的链接

https://getbootstrap.com/examples/grid/