React Bootstrap：行列的垂直对齐？

Posted 2023-02-22

【中文标题】React Bootstrap：行列的垂直对齐？

【英文标题】：React Bootstrap: Vertical alignment of row's columns?

【发布时间】：2019-02-28 05:50:12

【问题描述】：

我正在使用 react bootstrap，我试图在一行中垂直对齐项目，但没有运气。我的问题是我在其中一列中有一个按钮，因此对于其他列，所有文本都向上移动了一点，而按钮及其内容具有更大的高度。 我的问题是如何使一行中的所有列具有相同的高度并在中间垂直对齐？ 到目前为止，我设法找到的唯一解决方案是使用 CSS： 转换： translateY(-50%) 这可以解决问题，但我一直在寻找更好的更动态的解决方案，因为这需要应用于除按钮列之外的每一列

编辑：当我说列和行时，我说的是引导程序的 Col 和 Row，而不是实际的表或行和列；误会见谅

【参考方案1】：

如果您使用表格行，您可以将内容包装在 <div>..</div> 中

喜欢：

<tr>
  <div classname="align-me"></div>
</tr>

然后你可以使用 flexbox 动态对齐它们：

tr .align-me 
  display: flex;
  align-items: center;

【讨论】：

抱歉造成误解，我实际上指的是引导程序的 'col' 和 'row' 类，而不是实际的 html 表格

能否贴出相关代码sn-p或者jsfiddle链接？

【参考方案2】：

您可以将任何 Bootstrap 类应用到 React Bootstrap 组件。因此，根据the Grid System docs，以下列都将垂直居中：

<Row className="align-items-center">
  <Col>
    <h1>title</h1>
    <p>details</p>
  </Col>
  <Col>
    <button>callToAction</button>
  </Col>
</Row>;

【讨论】：

至少这个答案对我有用。我建议 react-bootstrap 团队尽快更新文档。有时我不太确定 Bootstrap 的所有功能在 reactjs bootstrap 中是否也有效。