Почему добавление `sm-4` делает добавление поля для встроенных видео слишком широким? - PullRequest
Новая
       17

Почему добавление `sm-4` делает добавление поля для встроенных видео слишком широким?

0 голосов
/ 21 апреля 2020

Итак, просто для теста я сделал это 

<div id="reo" class="reo">
    <div class="container">
        <div class="row">
            <div class="col m-3 embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
            </div>
            <div class="col m-3 embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
            </div>
            <div class="col m-3 embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

, и он работает как положено, но если я добавлю несколько размеров столбцов, например col-sm-4, к моим столбцам, мои видео тоже большого размера в ряд, и они складываются.

Хотя код довольно хорош, я задаюсь вопросом, почему задание указанного столбца размера c портит поведение встроенного видео, когда это ни с чем не связано, я положил в столб.

1 Ответ

0 голосов
/ 21 апреля 2020

Это потому, что у вас в списке классов есть имя класса: m-3, которое дает запас 1rem для каждого из элементов div, и это приведет к тому, что ширина любого col-sm-4 (33,333333%) будет добавьте к нему (1rem), и это сделает ширину трех делителей более чем на 100% с помощью (3rem).

попробуйте удалить этот класс и использовать вместо него отступы (p-3).

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

...