Question

如何在行元素内显示时使表高度响应？在此行元素中，有两个表和一个图像，因此行高设置为适合此图像。或者也许还有另一种方法可以为固定大小的图像制作标签？我刚刚找到了使用像{ height: 120%; }之类的东西设置表高度的方法，但它没有响应。

代码：

<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">Table1</th>
            </tr>
          </thead>
          <tbody>
            {table1Content}
          </tbody>
        </table>
      </div>
    </div>
    <div className="col-md-5">
      <img className="img-responsive" src={"data:image/jpg;base64," + this.state.image.image} />
    </div>
    <div className="col-md-2">
      <div className="table-responsive">
        <table className="table">
          <thead>
            <tr>
              <th className="text-center vert-align">Table2</th>
            </tr>
          </thead>
          <tbody>
            {table2Content}
          </tbody>
        </table>
      </div>
    </div>
  </div>

Answer 1

使用display: flex;并设置.table和.table-responsive的高度。

将<{1}}添加到您的行，并删除旧版row-eq-height，如果您想使用col-md-8，请在外面添加更多col-*-x div，因为它可能是错误的row属性为float。

col-*-x

在此处查看结果：https://jsfiddle.net/6eq89r4r/2/

响应表高度Bootstrap

1 个答案: