Question

如何使我的代码使用设备的全宽度？我正在使用引导程序。

    <section class="special-area bg-white section_padding_100" id="about">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <!-- Section Heading Area -->
                        <div class="section-heading text-center">
                            <h2>Why Is It Special</h2>
                            <div class="line-shape"></div>
                        </div>
                    </div>
                </div>
<div class="row">
                <!-- Single Special Area -->
                <div class="col-12 col-md-4">
                    <div class="single-special text-center wow fadeInUp" data-wow-delay="0.2s">
                        <div class="single-icon">
                            <i class="ti-mobile" aria-hidden="true"></i>
                        </div>
                        <h4>Heading</h4>
                        <p>Some text here</p>
                    </div>
                </div>
            </div>
</section>

Answer 1

您必须使用

class="container-fluid"

代替容器类，因为容器类本身具有左右的填充...

Answer 2

从docs：

对整个宽度的容器使用.container-fluid，跨视口的整个宽度。

只需确保它是您最外面的元素。

Answer 3

您可以将代码的那些部分包含在类名为container-fluid的预定义div中。以下是container-fluid的属性：

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

您还可以将宽度为100％的样式添加到任何其他容器中，但这也许会与CSS的其他样式规则冲突。

希望有帮助。

bootstarp中的全角容器文本框

3 个答案: