JQuery не соответствует ширине div в bootstrap

У меня есть проект asp.net mvc4, где у меня есть загрузочный файл для разметки и jquery для работы на стороне клиента.JQuery не соответствует ширине div в bootstrap

<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);

При попадании предупреждения он вернется уборки = 382 и hgth = 382, но после замены элементов у меня есть следующие строки

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

И я не знаю, почему это вставка 412 вместо 382. Но мне нужно 382. Есть идеи, где моя ошибка?

источник

2014-01-02 BorHunter

Ширина также включает в себя прокладку. – Anup

Минус отступ от общей ширины или просто удалите прокладку для div. – Anup

@ Ану, полагаю, это. Но почему это ширина и высота оповещения как 382? – BorHunter

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

ширина BG не включает в себя обивку

Col-MD-12 имеет левую обивку: 15px & обивка-направо: 15px.

Ваш IMG ширина 382px + 15px + 15px = 412px

источник

2014-01-02 10:50:06 Anup

Я попробовал var wdth = $ ("# porfolioImage"). InnerWidth(); var hgth = $ ("# porfolioImage"). InnerHeight(); $ ("# overlayCont"). Width (wdth - $ ("# porfolioImage"). Css ('padding-left') - $ ("# porfolioImage"). Css ('padding-right')). Height (hgth); $ ("# bg"). Width (wdth - $ ("# porfolioImage"). Css ('padding-left') - $ ("# porfolioImage"). Css ('padding-right')).высота (hgth); но тот же 412px – BorHunter

Вам нужно удалить прокладку из css: '#bg {padding: 0; } 'или установить его с помощью jq:' $ ('# bg'). css ('padding', 0); – n1kkou

Заполнение происходит от '.col-md-12', который является предварительно загруженным классом начальной загрузки. – Anup

Я думаю, что проблема в том, что начальной загрузки или установить в 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() имеет определенное поведение dipends в настройки CSS см http://api.jquery.com/width/ для получения дополнительной информации.

или консоль в моем jsfiddle например: http://jsfiddle.net/Lyfr5/1/

я надеюсь, что это может помочь вам понять. Bye

источник

2014-01-02 11:27:08 Frogmouth

JQuery не соответствует ширине div в bootstrap

ответ

Смежные вопросы