Question

我正在尝试添加边框并使网格均匀，但两个方框的框大小都不同。

我的HTML代码：

<div class="col-md-2  hvr-grow-shadow" >
    <div class="widget">
        <div class="widget-controls">
            <span class="refresh-content"><i class="fa fa-refresh"></i></span>
        </div>
        <div  data-toggle="modal" data-target="#myModal" id="click" class="mini-stats cliente-sky ">
            <span class="sky-skin" >
                <p margin-top="15px;" style="margin-top: 15px;">1.5%</p>
            </span>
            <h5>C3 All Servers </h5>
            <h5> 2/2339</h5>
            <p>OVERALL SERVERS DOWN: 36</p>
            <button type="button" class="btns  red-skin btns-bot sml-btn sml-radius">Goal 2%</button>
        </div>
    </div>
</div>
<div class="col-md-2  hvr-grow-shadow" >
    <div class="widget">
        <div class="widget-controls cliente-sky">
            <span class="refresh-content"><i class="fa fa-refresh"></i></span>
        </div>
        <div  data-toggle="modal" data-target="#myModal" class="mini-stats ">
            <span class="purple-skin">
                <p margin-top="15px;" style="margin-top: 15px; color:white">1.4%</p>
            </span>
            <h5>CERTIFIED HP SERVER</h5>
            <h5>2/1891</h5>
            <p>OVERALL HP SERVERS DOWN: 26
            <p>
                <button type="button" class="btns  sky-skin btns-bot sml-btn sml-radius">Goal: 2%</button>
        </div>
    </div>
</div>

有人可以帮助我实现这个目标吗？

Answer 1

框的大小不同是因为您的标签在第二个框中不匹配。变化：

    <p>OVERALL HP SERVERS DOWN: 26
    <p>
    <button type="button" class="btns  sky-skin btns-bot sml-btn sml-radius">Goal: 2%</button>
</div>

为：

    <p>OVERALL HP SERVERS DOWN: 26</p>
    <button type="button" class="btns  sky-skin btns-bot sml-btn sml-radius">Goal: 2%</button>
</div>

至于添加边框，CSS应该很简单。不要忘记正确设置盒子大小，否则你的边框可能会再次出现。

.hvr-grow-shadow {
    /* Border Stuff here, example:
     * border: 1px solid black;
     */
    box-sizing: border-box;
}

如何使用Bootsrap CSS为div添加边框

1 个答案: