Дисплей d3.js ошибочно в bootstrap modal

Question

У меня возникла проблема, которая вызывает в bootstrapmodal, я поместил график пончиков d3.js, но он отображается неправильно.

Номер будет перекрываться с текстом, однако он будет работать отлично, без modal.

<div class="portfolio-modal modal" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true"> 
     <div class="modal-content"> 
      ... 
      <div class="container"> 
       ... 
       <div class="row"> 
        ... 
        <div class="col-md-6"> 
         <div id="pieChart"></div> 
        </div>     
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Возможно, вы столкнулись с проблемой модульной ширины.

В Bootstrap 3.1.1 они добавили классы modal-lg и modal-sm. Вы управляете модальным размером, используя запросы @media, как они это делают. Это более глобальный способ контроля модального размера.

@media (min-width: 992px) 
.modal-lg 
{ 
    width: 900px; 
    height: 900px; /* control height here if its needed */ 
} 

Один образец для вас

<!-- Large modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div> 

<!-- Small modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> 

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria- labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div> 

Я надеюсь, что это помогает мой друг, если вы могли бы обеспечить JSFIDDLE файл будет облегчить нашу работу =)