javascript - Jquery 在 Bootstrap 中得到错误的 div 宽度

Question

我有一个 asp.net mvc4 元素，其中有用于标记的 Bootstrap 和用于客户端工作的 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。有什么想法是我的错误在哪里吗？

Answer 1

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

bg 宽度不包括填充

col-md-12 有一个 padding-left: 15px & padding-right: 15px.

你的 img 宽度是 382px + 15px + 15px = 412px