Текстовое поле полной ширины контейнера в начальной загрузке

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

Из документов :

Используйте .container-liquid для контейнера полной ширины, охватывающего всю ширину области просмотра.

Просто убедитесь, что это ваш самый внешний элемент.

Answer 2

Вы можете включить те части вашего кода в предопределенный div, имя класса которого container-fluid. Вот свойства container-fluid:

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

Вы также можете добавить стиль ширины 100% к любому другому контейнеру, но, возможно, это может вступить в противоречие с другими правилами стиля вашего CSS.

Надеюсь, это поможет.

Answer 3

вы должны использовать

class="container-fluid"

вместо класса контейнера, потому что сам класс контейнера имеет отступы справа и слева ...