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＆amp; padding-right：15px。

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

Answer 2

我认为问题是因为bootstrap或你在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});

或者，min version：

$("#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/

我希望它可以帮助你理解。再见

Jquery在bootstrap中得到错误的div的宽度

2 个答案: