Question

当我创建一个模态窗口时，内容正在显示，但内容周围没有白框。有人能指出我正确的方向。

<div class="row">
            <ul>
                <li class="thumbnail col-sm-3 col-xs-6"><a href="#ensuite" data-toggle="modal"><img src="img/thumbs/6.jpg" alt="En-suite Bedroom"></a></li>
                <li class="thumbnail col-sm-3 col-xs-6"><a href="#"><img src="img/thumbs/6.jpg" alt="En-suite Bedroom"></a></li>
                <li class="thumbnail col-sm-3 col-xs-6"><a href="#"><img src="img/thumbs/6.jpg" alt="En-suite Bedroom"></a></li>
                <li class="thumbnail col-sm-3 col-xs-6"><a href="#"><img src="img/thumbs/6.jpg" alt="En-suite Bedroom"></a></li>
                <li class="thumbnail col-sm-3 col-xs-6"><a href="#"><img src="img/thumbs/6.jpg" alt="En-suite Bedroom"></a></li>
                <li class="thumbnail col-sm-3 col-xs-6"><a href="#"><img src="img/thumbs/6.jpg" alt="En-suite Bedroom"></a></li>
                <li class="thumbnail col-sm-3 col-xs-6"><a href="#"><img src="img/thumbs/6.jpg" alt="En-suite Bedroom"></a></li>

            </ul>
        </div>

模态

  <div id="ensuite" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-header">
         <button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal">                </button>
     <h4> En-Suite Room </h4>
        </div>
       <div class="modal-body">
          <img src="img/6.jpg" alt="En-Suite Room" class="img-responsive">
       </div>
         <div class="modal-footer">
           <button class="btn btn-primary" data-dismiss="modal"> Close</button>
        </div>
    </div>

Answer 1

您错过了modal-content包装

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"></div>
      <div class="modal-body"></div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>

模态窗口无法正常显示

1 个答案: