时间戳

首页 > 解决方案 > 为什么我的 Bootstrap 行向我的元素添加填充？

html - 为什么我的 Bootstrap 行向我的元素添加填充？

问题描述

我正在尝试引导列系统，并且正在尝试使文本居中，但它不起作用，因为它有一个可能来自引导行类的填充，这是我的代码

 <section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}>
            <div className="text-a-img row col-12">
                <div className="ti-title col-12 mt-4 text-center row">
                    <h1>Fast response</h1>
                </div>
                <div className="ti-img col-12"></div>
                <div className="ti-text-col-12"></div>
            </div>
            <div className="text-a-img row col-12">
                <div className="ti-title col-12 mt-4 text-center row">
                    <h1>Fast response</h1>
                </div>
                <div className="ti-img col-12"></div>
                <div className="ti-text-col-12"></div>
            </div>
            <div className="text-a-img row col-12">
                <div className="ti-title col-12 mt-4 text-center row">
                    <h1>Fast response</h1>
                </div>
                <div className="ti-img col-12"></div>
                <div className="ti-text-col-12"></div>
            </div>
        </section>

那些自定义类名什么也没做，因为我的 CSS 仍然是空的，看起来像这样

在此处输入图像描述

在此处输入图像描述

我可以摆脱这种填充的唯一方法是删除row类，我不想这样做我已经尝试过内联样式自定义类等，我该如何摆脱这种填充？

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

从逻辑上讲，这不是使用引导网格的方法。我在这里看到的第一个问题是您直接row在row. 理想情况下row应该紧跟一个col. 如果您想引入新的网格行/列，您应该在该列中进行。所以它会是这样的：

<div class="row">
    <div class="col-12">
        <div class="row">
          <div class="col-6">
          </div>
          <div class="col-6">
          </div>
        </div>
    </div>
</div>

在你的情况下：

<section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}> 
    <div className="text-a-img col-12">
        <div className="row">
            <div className="ti-title col-12 mt-4 text-center row">
                <h1>Fast response</h1>
            </div>
            <div className="ti-img col-12"></div>
            <div className="ti-text-col-12"></div>
        </div>
    </div>
</section>

还有一些其他需要考虑的事情：总是用容器类包装你的行/列网格，container或者container-fluid。

另外，考虑为行和列设置自己的边距和填充值，因为引导程序还具有行和列类的默认值。所以也请考虑它们。

而且您显然在使用 react.js，所以我建议您使用REACTSTRAP。它是一个用于反应的引导包装器。您将拥有更简洁的代码。就这么简单：

<Container>
    <Row>
        <Col md={12}>
        </Col>
    </Row>
</Container>

推荐阅读