Question

White space

modal-footer下面的这个空白区域（在上图中标记为什么）是什么？尝试检查元素，但铬没有显示任何东西。想要删除此空白区域。我使用的是Bootstrap 3。网站：Link

HTML：

<link rel="stylesheet" href="/static/css/bootstrap_3.2.css">
<div id="shoppingModal2" class="modal in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-left: 30%; overflow-x: hidden; margin-top: 3%; display: block;">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">Your Shopping Cart</h3>
    </div>  
    <div class="modal-body shopping_cart_body">
       <table class="table table-hover" id="shopping_table">
       <thead> 
       <tr><td class="active">Product Image</td>
           <td class="active">Id</td>
           <td class="active">Size</td>
           <td class="active">Price</td>
           <td class="active"></td>
       </tr>
      </thead>
      <tbody>  
    <tr>
    <td class="active"><img src="/static/media/pins/pin/thumbnails/517072d813a12d792ca84a562320d89cee307ec7a34b21f16fe96b666cf61b6c.jpg " width="60px;"></td>
    <td class="active">2577</td>
    <td class="active"><strong> 8.00in x 10.00in </strong></td>
    <td class="active"> $ 
      <span class="price_row"> 15.00 </span></td>
    <td class="active" onclick="remove_from_cart(this)" data-id="2577" style="cursor:pointer;">×</td>
    </tr>

    <tr>
    <td class="active"><img src="/static/media/pins/pin/thumbnails/8bd665c57f537d6adbcb5e50e14c57b61e0e69e64228da42253b01dc8966b5e4.jpg " width="60px;"></td>
    <td class="active">2585</td>
    <td class="active"><strong> 27.00in x 21.00in </strong></td>
    <td class="active"> 
      <span class="price_currency">Rs. </span>
      <span class="price_row"> 4500.00 </span></td>
    <td class="active" onclick="remove_from_cart(this)" data-id="2585" style="cursor:pointer;">×</td>
    </tr>

    <tr>
    <td class="active"><img src="/static/media/pins/pin/thumbnails/38572fea1b9c7e75928cecb1e67ff89c11bb04432d3cbfe1860a99e068304d49.jpg " width="60px;"></td>
    <td class="active">2586</td>
    <td class="active"><strong> 21.00in x 21.00in </strong></td>
    <td class="active"> 
      <span class="price_currency">Rs. </span>
      <span class="price_row"> 5000.00 </span></td>
    <td class="active" onclick="remove_from_cart(this)" data-id="2586" style="cursor:pointer;">×</td>
    </tr>

</tbody>  
</table>



</div>  
    <div class="modal-footer">
      <span class="pull-left"> Total Price: </span> <span class="pull-left" id="total_price">Rs. 10430</span> 
     <button class="btn btn-primary">Proceed to Buy <i class="icon-chevron-right icon-white"></i> </button>
    </div>   
  </div>

Answer 1

我认为你的模态脚本或结构有问题。尝试从头开始重新安排一切！

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#shoppingModal2">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="shoppingModal2" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                 <h4 class="modal-title" id="myModalLabel">Your Shopping Cart</h4>

            </div>
            <div class="modal-body">
                <table class="table table-hover" id="shopping_table">
                    <thead>
                        <tr>
                            <td class="active">Product Image</td>
                            <td class="active">Id</td>
                            <td class="active">Size</td>
                            <td class="active">Price</td>
                            <td class="active"></td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="active">
                                <img src="/static/media/pins/pin/thumbnails/517072d813a12d792ca84a562320d89cee307ec7a34b21f16fe96b666cf61b6c.jpg " width="60px;">
                            </td>
                            <td class="active">2577</td>
                            <td class="active"><strong> 8.00in x 10.00in </strong>
                            </td>
                            <td class="active">$ <span class="price_row"> 15.00 </span>
                            </td>
                            <td class="active" onclick="remove_from_cart(this)" data-id="2577" style="cursor:pointer;">×</td>
                        </tr>
                        <tr>
                            <td class="active">
                                <img src="/static/media/pins/pin/thumbnails/8bd665c57f537d6adbcb5e50e14c57b61e0e69e64228da42253b01dc8966b5e4.jpg " width="60px;">
                            </td>
                            <td class="active">2585</td>
                            <td class="active"><strong> 27.00in x 21.00in </strong>
                            </td>
                            <td class="active"> <span class="price_currency">Rs. </span>
 <span class="price_row"> 4500.00 </span>
                            </td>
                            <td class="active" onclick="remove_from_cart(this)" data-id="2585" style="cursor:pointer;">×</td>
                        </tr>
                        <tr>
                            <td class="active">
                                <img src="/static/media/pins/pin/thumbnails/38572fea1b9c7e75928cecb1e67ff89c11bb04432d3cbfe1860a99e068304d49.jpg " width="60px;">
                            </td>
                            <td class="active">2586</td>
                            <td class="active"><strong> 21.00in x 21.00in </strong>
                            </td>
                            <td class="active"> <span class="price_currency">Rs. </span>
 <span class="price_row"> 5000.00 </span>
                            </td>
                            <td class="active" onclick="remove_from_cart(this)" data-id="2586" style="cursor:pointer;">×</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Proceed to buy <i class="glyphicon glyphicon-chevron-right"></i></button>
            </div>
        </div>
    </div>
</div>

这是DEMO

引导3模态下的白色空间

1 个答案: