Белое пространство ниже начальной загрузки 3 Modal

Question

Что это белое пространство (отмечен как то, что в картинке) ниже 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