为什么我的可滚动div不能在Bootstrap模式中工作？

Question

我有问题让我发疯。我有一个简单的DIV，我想将其转换为可滚动的DIV。里面有一张桌子，应该很容易。我用我的代码得到了一个单独的.html文件，效果很好。

这是：

   <div id="agreement_rate_multiple_view" style="overflow:scroll; height:100px; width:500px;">
                             <table id="agreement_rates_list" >
                                <thead>
                                    <tr>
                                        <th style="background-color: #CCCCCC">
                                            Quantity
                                        </th>
                                        <th style="background-color: #CCCCCC">
                                            Amount
                                        </th>
                                        <th style="background-color: #CCCCCC">
                                            Effective Date
                                        </th>
                                        <th style="background-color: #CCCCCC">
                                            ExpirationDate
                                        </th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr>
                                        <td style="text-align: center">
                                            <input type="text" style="width:80px;" id="agreement_charges_edit_quantity0"  />
                                        </td>
                                        <td style="text-align: center">
                                            <input type="text" style="width:80px;" id="agreement_charges_edit_amount0"  />
                                        </td>
                                        <td style="text-align: center">
                                            <input type="date" style="width:125px;" id="agreement_charges_effectiveDate_edit0" />
                                         </td>
                                        <td style="text-align: center">
                                            <input type="date" style="width:125px;" id="agreement_charges_expirationDate_edit0" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: center">
                                            <input type="text" style="width:80px;" id="agreement_charges_edit_quantity1"  />
                                        </td>
                                        <td style="text-align: center">
                                            <input type="text" style="width:80px;" id="agreement_charges_edit_amount1"  />
                                        </td>
                                        <td style="text-align: center">
                                            <input type="date" style="width:125px;" id="agreement_charges_effectiveDate_edit1" />
                                         </td>
                                        <td style="text-align: center">
                                            <input type="date" style="width:125px;" id="agreement_charges_expirationDate_edit1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: center">
                                            <input type="text" style="width:80px;" id="agreement_charges_edit_quantity2"  />
                                        </td>
                                        <td style="text-align: center">
                                            <input type="text" style="width:80px;" id="agreement_charges_edit_amount2"  />
                                        </td>
                                        <td style="text-align: center">
                                            <input type="date" style="width:125px;" id="agreement_charges_effectiveDate_edit2" />
                                         </td>
                                        <td style="text-align: center">
                                            <input type="date" style="width:125px;" id="agreement_charges_expirationDate_edit2" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: center">
                                            <input type="text" style="width:80px;" id="agreement_charges_edit_quantity3"  />
                                        </td>
                                        <td style="text-align: center">
                                            <input type="text" style="width:80px;" id="agreement_charges_edit_amount3"  />
                                        </td>
                                        <td style="text-align: center">
                                            <input type="date" style="width:125px;" id="agreement_charges_effectiveDate_edit3" />
                                         </td>
                                        <td style="text-align: center">
                                            <input type="date" style="width:125px;" id="agreement_charges_expirationDate_edit3" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: center">
                                            <input type="text" style="width:80px;" id="agreement_charges_edit_quantity4"  />
                                        </td>
                                        <td style="text-align: center">
                                            <input type="text" style="width:80px;" id="agreement_charges_edit_amount4"  />
                                        </td>
                                        <td style="text-align: center">
                                            <input type="date" style="width:125px;" id="agreement_charges_effectiveDate_edit4" />
                                         </td>
                                        <td style="text-align: center">
                                            <input type="date" style="width:125px;" id="agreement_charges_expirationDate_edit4" />
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

这种作品完美无瑕。

现在，问题是，这个div出现在一个Bootstrap模式中，似乎由于某种原因，因为这个div在一些其他div中，也许是假设可滚动的div，根据其他行为表现CSS类。

但是，这并不是因为我使用内联CSS来实现这一点!!!

以下是可滚动div的屏幕截图，在单独的.html页面中正常工作：

现在，这里是同一个div的截图，但这一次，出现在Bootstrap模式中：

某些东西强迫div占据桌面高度，它甚至不显示滚动条！

当您看到原始的.aspx

时，这是指向我的Skydrive的链接

Original .aspx file

有没有办法强制我的内联CSS工作？任何帮助都会非常感激，对不起我的英语。这不是我的母语。

Answer 1

我不知道这会有多远..请尝试.. :)

#agreement_rate_multiple_view {
    overflow:scroll !important; 
    height:100px; 
    width:auto; 
}