Jquery 在引导中弄错了 div 的宽度

Question

我有 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。任何想法我的错误在哪里？

Answer 1

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

BG 宽度不包括填充

Col-MD-12有一个左填充：15px和右填充：15px。

您的图像宽度为 382px + 15px + 15px = 412px

Answer 2

我认为问题是因为引导程序或您在 css 中设置box-sizing，例如：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

使用此设置.width()设置元素的宽度 + 填充和边框大小。

为了在不更改 CSS 的情况下防止这种行为，我认为您只需使用 .css() 而不是 .width() 和 .heigth() ，所以：

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

更改位置：

$("#overlayCont").css({height:hgth, width:wdth});
$("#bg").css({height:hgth, width:wdth});

或者，最小版本：

$("#overlayCont,#bg").css({height:hgth, width:wdth});

.css("width") ，.css("width",number)返回并获取 CSS 样式（忽略填充、边框和框大小设置）

.width()具有特定行为的 CSS 设置，请参阅 http://api.jquery.com/width/以获取更多信息。

或者我的 JSFIDDLE 示例中的控制台：http://jsfiddle.net/Lyfr5/1/

希望能帮你理解。再见