问题
I am using react bootstrap, I am trying to align items vertically within a row but with no luck. My problem is I have a button in one of the columns, so for the other columns all the texts are shifted up a bit while the button and its content have a larger height. My question is how can I make all columns within a row to have the same height and to all align in the middle vertically? The only solution I managed to find so far is using CSS: tranform: translateY(-50%) this does the trick, but I was looking for a better more dynamic solution as this needs to be applied for every column excepts for the button column
EDIT: When I say columns and rows, I'm talkign about bootstrap's Col and Row, not actually a table or rows and columns; sorry for the misunderstanding
回答1:
If you are using table rows, you can wrap contents within a <div>..</div>
like:
<tr>
<div classname="align-me"></div>
</tr>
and then you can use flexbox to align them dynamically:
tr .align-me {
display: flex;
align-items: center;
}
回答2:
You can apply any of Bootstrap's classes to a React Bootstrap component. So, per the Grid System docs, the following columns will both be centered vertically:
<Row className="align-items-center">
<Col>
<h1>{title}</h1>
<p>{details}</p>
</Col>
<Col>
<button>{callToAction}</button>
</Col>
</Row>;
来源:https://stackoverflow.com/questions/52484040/react-bootstrap-vertical-alignment-of-rows-columns