在引导模式中对齐 2 个 div

Question

我不知道我的标题是否足够清楚。 我尝试用圆顶代码解释自己

我有这样的 HTML 模态对话框

  <div id="ModalGraficoCompLav_0" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class='modal-dialog'> 
        <div class='modal-content'>
           <div class='modal-header'> 
              <button type=?button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
               <h4 class='modal-title'>Stato Componenti e Lavorazioni</h4> 
            </div> 
            <div id='ModalBody' class='modal-body'> 
               <div class='row'> 
                  <div class='col-lg-6'> Componenti 
                      <div id='GraficoComp0'class='ModalGraficoSmall'></div>
                  </div> 
                  <div class='col-lg-6'>Lavorazioni 
                       <div id='GraficoLav0'class='ModalGraficoSmall'></div> 
                  </div> 
               </div> 
            </div> 
            <div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button>
            </div>
        </div>
     </div>
   </div>

2 个 div col-lg-6 将被 jquery flot 插件填充。

在我的 CSS 中，我有这些规则：

   .ModalGraficoSmall { width: 200px; height:100px;}

jquery flot 必须设置宽度和高度，如果我不设置宽度或高度，图表将不再出现。

现在，为了完整起见，我还添加了 jquery flot 脚本

 var opts = {
    series: {
        pie: {
            show: true,
            radius: 1,
            label: {
                show: true,
                radius: 2 / 3,
                formatter: function (label, series) {
                    return '<div style="font-size:11px ;text-align:center; padding:2px; color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
                },
                threshold: 0.1
            }
        }
    },
    legend : 
        {
            show: false
        }
};



 $.plot($("#GraficoComp0"), dataComp, opts);
 $.plot($("#GraficoLav0"), dataLav, opts);

这是我的结果：

我想要得到的是：

Answer 1

尝试this设置，在模态中我有2个面板，只需用您的图表填充面板主体！

代码：

 <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>

                </button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading text-center">
                                    <h3 class="panel-title">Chart One</h3>

                            </div>
                            <div class="panel-body"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading text-center">
                                    <h3 class="panel-title">Chart Two</h3>

                            </div>
                            <div class="panel-body"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

了解引导网格系统here