引導：在拆分框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/