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

使用警告无效时删除多余的右边距

1 个答案: