Bootstrap列内内容对齐问题：React中如何将nav元素置于列底部？

你当前的问题是align-items-bottom不生效，原因是Bootstrap的col默认不是flex容器，这类对齐类只有在flex容器上才起作用。按下面的方式修改代码即可实现nav元素在列底部对齐：

修改后的代码 #

<div className="pageHeader">
    <div className="container-fluid">
        <div className="row">
            <div className="col-md-3 col-sm-12">
                <Logo currentPage='marine' />
            </div>
            <div className="col-md-9 col-sm-12 d-flex flex-column">
                <nav className="navigationBar mt-auto">
                    <div className="navbarDiv">
                        <ul id="navmenu" className="navmenu">
                            {
                                headerObject.buttonDataArray.map((button, index) => {
                                    return (
                                        <NavButton key={index} buttonData={button} />
                                    )
                                })
                            }
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

关键修改说明 #

• d-flex：将第二列的div转换为flex容器，这样Bootstrap的flex对齐类才能生效
• flex-column：设置flex容器的主轴方向为垂直，让内部元素按纵向排列
• mt-auto：给nav元素添加自动上边距，在垂直flex容器中，这个属性会让nav自动占据容器顶部到自身之间的剩余空间，从而被推到容器底部

另外注意：原代码中ul标签用了class属性，在React项目里应该改为className，已在示例中修正。

内容的提问来源于stack exchange，提问作者eaidy