文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用react-bootstrap使分页块居中

问如何使用react-bootstrap使分页块居中
EN

Stack Overflow用户

提问于 2020-10-11 03:55:59

回答 3查看 647关注 0票数 1

我已经为我正在使用react-bootstrap构建的一个小型web应用程序构建了一个自定义分页设置。我已经让所有的集成和分页工作正常。我对react / bootstrap比较陌生，没有做过很多css。我希望尽可能避免使用css，这就是我选择使用react-bootstrap的原因

我遇到的问题是不能让我的分页显示在块的中心：

我的react钩子看起来像这样：

return (
        <div>
            <div align="center">
                <div className="p-3">
                    <Disclaimer/>
                </div>
                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>
                {custom_cards}
                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>
            </div>
        </div>
    );

我知道解决方法在这里：

                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>

我已经尝试过align和其他类似text-center的东西。作为一名新人，我没有合适的关键字在网络上为我提供一个好的搜索结果。如果你有任何线索，我将不胜感激。

html

reactjs

pagination

react-bootstrap

回答 3

Stack Overflow用户

发布于 2021-05-28 17:16:22

您可以简单地将这两个CSS属性添加到父div：

style={{ display："flex"，justifyContent："center“}}

<div style={{ display: "flex", justifyContent: "center" }}>
  <Pagination>
    <Pagination.First />
    <Pagination.Prev />
    <Pagination.Item>{1}</Pagination.Item>
    <Pagination.Ellipsis />

    <Pagination.Item>{10}</Pagination.Item>
    <Pagination.Item>{11}</Pagination.Item>
    <Pagination.Item active>{12}</Pagination.Item>
    <Pagination.Item>{13}</Pagination.Item>
    <Pagination.Item disabled>{14}</Pagination.Item>

    <Pagination.Ellipsis />
    <Pagination.Item>{20}</Pagination.Item>
    <Pagination.Next />
    <Pagination.Last />
  </Pagination>
</div>

票数 2

Stack Overflow用户

发布于 2020-10-11 04:07:15

也许，您可以使用页脚/分页类和.css类。

.Pagination {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
}

<footer className="Pagination">
   <p>I'm a footer</p>
</footer>

票数 0

Stack Overflow用户

发布于 2021-06-21 05:01:07

可以使用bootstrap类将分页组件居中

<Pagination size="lg" className="d-flex justify-content-center">
    {pages}
</Pagination>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64297670

复制

相似问题

问如何使用react-bootstrap使分页块居中
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用react-bootstrap使分页块居中EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用react-bootstrap使分页块居中
EN