在模态元素Bootstrap

Question

我有.modal .modal-dialog { width: 80%; }的模态样式，我正在尝试使用表格响应表来垂直填充模态体。表只有一列，这意味着它必须在这种情况下改变行高（我猜）（具有响应行高的表）。使用React-Bootstrap创建的模态。

更新模式代码：

var ModalView = React.createClass({


getInitialState: function(){
    return { showModal: false, tableView: false, image: [] };
  },

  loadDataFromServer: function() {
    $.getJSON(this.props.url,{id: this.props.id},
      function(data) {
        this.setState({image: data});
      }.bind(this)
    );
  },

  close: function(){
    this.setState({ showModal: false });
  },

  open: function(){
    this.setState({ showModal: true });
    this.loadDataFromServer();
  },

  showGrid: function(){
    this.setState({ tableView: true });
  },

  showImage: function(){
    this.setState({ tableView: false });
  },

  render: function() {
    const Button = ReactBootstrap.Button;
    const Modal = ReactBootstrap.Modal;
    var base64string = this.state.image;
    return (
      <div>
        <Button onClick={this.open}>
          Show
        </Button>

        <Modal show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title>{this.props.heading}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            {this.state.tableView
              ? <div className="row">
                <div className="col-md-8"></div>
                <div className="col-md-3"><Button onClick={this.showImage}>Show Image</Button></div>
                </div>

              : <div className="row">
                <div className="col-md-8">
                  <div className="col-md-2">
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            <th className="text-center vert-align">Antigen</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td className="text-center vert-align">1</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">2</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">3</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">4</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">5</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">6</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">7</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">8</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div className="col-md-5">
                    <img className="img-responsive" src={"data:image/jpg;base64," + base64} />
                  </div>
                  <div className="col-md-2">
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            <th className="text-center vert-align">Antigen</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td className="text-center vert-align">1</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">2</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">3</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">4</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">5</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">6</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">7</td>
                          </tr>
                          <tr>
                            <td className="text-center vert-align">8</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                  <div className="col-md-3"><Button onClick={this.showGrid}>Show Grid</Button></div>
                </div>
            }

          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.close}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
});