Убрать лишнее правое поле при использовании alert-disptable

Question

Добавление alert-dismissible добавляет поле ко всему окну предупреждения, которое мне не нравится:

 <div class="alert alert-dark mb-5 alert-dismissible fade show" role="alert">
        <div class="media">
            <img src="https://dummyimage.com/45x45/000/fff" class="align-self-top mr-3" alt="logo">
            <div class="media-body">
                <strong>Hello!</strong><br />
                Bla bla bla
            </div>
        </div>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>

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

Как вы можете видеть в JSFiddle , видео не 'принять всю ширину предупреждения, но остается слишком далеко от правой стороны.Удаление alert-dismissible исправляет это, но я хочу эту функциональность.

Answer 1

Просто сбросьте заполнение ???

.alert.alert-dismissible {
    padding-right: 1.25rem;
}

Если вы создаете собственную тему с Bootstrap SASS файлами, вы можете сделать что-то вроде:

.alert {
    &.alert-dismissible {
        padding-right: @alert-padding-x;
    }
}

демо: https://jsfiddle.net/davidliang2008/05puear4/2