如何在Bootstrap中对齐列内的内容?

00jrzges  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(120)

我正在使用React与Bootstrap。我想把第二列的内容放在列的底部。但我已经尝试到目前为止似乎没有工作。这里的问题是什么?我看到人们做同样的事情,并得到了结果,但我不能改变列内内容的对齐方式。
基本上,我希望'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 align-items-bottom">
                <nav className="navigationBar">
                    <div className="navbarDiv">
                        <ul id="navmenu" class="navmenu">
                            {
                                headerObject.buttonDataArray.map((button, index) => {
                                    return (
                                        <NavButton key={index} buttonData={button} />
                                    )
                                })
                            }
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>
ifsvaxew

ifsvaxew1#

尝试“d-flex align-items-end”类

<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 align-items-end">
                <nav className="navigationBar">
                    <div className="navbarDiv">
                        <ul id="navmenu" class="navmenu">
                            {
                                headerObject.buttonDataArray.map((button, index) => {
                                    return (
                                        <NavButton key={index} buttonData={button} />
                                    )
                                })
                            }
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

相关问题