【问题标题】:How to add border to div using Bootsrap CSS如何使用 Bootstrap CSS 为 div 添加边框
【发布时间】:2017-08-08 22:31:35
【问题描述】:

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

我的 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>

有人可以帮我实现吗?

【问题讨论】:

  • 您要为哪个&lt;tag&gt; 设置边框?是class ="hvr-grow-shadow"的div吗?
  • 感谢您的回复.. 是的,我正在尝试为这个标签设置边框
    我有 15 个这样的网格而且每个网格大小都不均匀......我想制作边框,所有网格看起来都一样大小。
  • 可以发一下css文件吗?

标签: css angular-ui-bootstrap bootstrap-modal


【解决方案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 应该很简单。不要忘记正确设置 box-sizing ,否则你的边框可能会让东西再次出现。

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

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签