javascript - jQuery在 bootstrap 中获得错误的div宽度

我有asp.net mvc4项目，其中有用于标记的引导程序和用于客户端工作的jquery。

<div class="row">
<div class="col-md-4 container" id="cont">
    <div class="row overlay_container" id="overlayCont">
        <div class="col-md-12 background" id="bg"></div>
        <div class="col-md-12 text" id="txt">
            <h1>This is a test!</h1>
            This is also a test!
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <img src="~/Content/Images/5.jpg" id="porfolioImage" />
        </div>
    </div>
</div>

        var wdth = $("#porfolioImage").width();
        alert(wdth);
        var hgth = $("#porfolioImage").height();
        alert(hgth);
        $("#overlayCont").width(wdth).height(hgth);
        $("#bg").width(wdth).height(hgth);

当命中警报时​​，它返回wdth = 382和hgth = 382，但是在替换元素之后，我有以下行

[<div class=​"col-md-12 background" id=​"bg" style=​"width:​ 412px;​ height:​ 382px;​">​</div>​]

而且我不知道为什么它插入412而不是382。但是我需要382。有什么主意我的错误在哪里？

最佳答案

$("#bg").width(wdth).height(hgth);

bg宽度不包含填充

col-md-12的padding-left：15px和padding-right：15px。

您的img宽度为382px + 15px + 15px = 412px