Question

我试图在我的模态体内创建一个表格，但表格显示的大于模态。

＆＃13;

$('#myModal').modal('show');

＆＃13;

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">X</button>
        <h4 id="infoTitleText" class="modal-title"><strong>Test</strong></h4>
      </div>

      <div class="modal-body">
        <table>
          <thead>
          </thead>
          <tbody>
            <tr>
              <td colspan="4" align="center">
                <p>Paragraph message</p>
              </td>
            </tr>
            <tr>
              <td><img src="//placehold.it/300x50/0bf" height="30" alt="image1" /></td>
              <td><img src="//placehold.it/300x50/0bf" height="30" alt="image2" /></td>
              <td><img src="//placehold.it/300x50/0bf" height="30" alt="image3" /></td>
              <td><img src="//placehold.it/300x50/0bf" height="30" alt="image4" /></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="modal-footer">
        <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
        <button data-dismiss="modal" class="btn btn-primary" type="button">Confirm</button>
      </div>

    </div>
  </div>

＆＃13;

有谁知道我做错了什么？我试图将表格放在模态中。

Answer 1

快速解决方法是将max-width用于您的图片，或者不使用表格，但是一些响应式设计技术...... - 一切都取决于您的需求......好了，你走了/ p>

＆＃13;

$('#myModal').modal('show');

＆＃13;

.modal-body table img {
  max-width: 100%;
}

＆＃13;

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">X</button>
        <h4 id="infoTitleText" class="modal-title"><strong>Test</strong></h4>
      </div>

      <div class="modal-body">
        <table>
          <thead>
          </thead>
          <tbody>
            <tr>
              <td colspan="4" align="center">
                <p>Paragraph message</p>
              </td>
            </tr>
            <tr>
              <td><img src="//placehold.it/300x50/0bf" height="30" alt="image1" /></td>
              <td><img src="//placehold.it/300x50/0bf" height="30" alt="image2" /></td>
              <td><img src="//placehold.it/300x50/0bf" height="30" alt="image3" /></td>
              <td><img src="//placehold.it/300x50/0bf" height="30" alt="image4" /></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="modal-footer">
        <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
        <button data-dismiss="modal" class="btn btn-primary" type="button">Confirm</button>
      </div>

    </div>
  </div>

＆＃13;

Answer 2

因为您没有计算图像的宽度，所以您只需为这些图像设置高度，宽度将与这些高度相对。

表比模态体大

2 个答案: