在bootstrap模式中错误地显示d3.js

Question

我遇到问题导致bootstrap modal，我放了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文件就可以轻松我们的工作=）