如何禁用水平条

Question

我正在使用 Sweetalert2 和 Bootstrap 5.1.3。我正在尝试像下面这样装饰 Sweetalert：

        var htmlString = `
        <div class="row"><div class="text-end col-6">ID:</div> <div class="text-start col-6">${data.id}</div></div>
        <div class="row"><div class="text-end col-6">Name:</div> <div class="text-start col-6">${data.name}</div></div>
        <div class="row"><div class="text-end col-6">Email:</div> <div class="text-start col-6">${data.email}</div></div>
        <div class="row"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">${data.active}</div></div>
        `;

还有我的Swal.fire块：

        Swal.fire({
            titleText: 'You sure to delete this user? ',
            showDenyButton: true,
            //showCancelButton: true,
            confirmButtonText: 'Yes',
            confirmButtonColor: 'green',
            denyButtonText: 'No',
            denyButtonColor: 'gray',
            customClass: {
                actions: 'my-actions',
                confirmButton: 'order-1',
                denyButton: 'order-2 right-gap',
            },
            html: htmlString,
            focusDeny: true,
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`${baseURL}/appUsers/${id}`, { method: "delete" });
                var p = obj.parentNode.parentNode;
                p.parentNode.removeChild(p);
                Swal.fire('Deleted Successfully !!', '', 'success');
            } else if (result.isDenied) {
                Swal.fire('Changes are not saved', '', 'info')
            }
        })

现在警报有一个看起来很奇怪的水平条，如下所示：

问题：我该如何摆脱它？

Answer 1

如果您能找到一种方法来从配置中设置 swal 容器元素的样式，则可以添加样式 overflow-x: hidden 值。否则，你可以包含一个 CSS 样式，在我检查容器后 class 你可以使用的名称是 .swal2-html-container

.swal2-html-container {
  overflow-x: hidden;
}

https://codepen.io/david-yappeter/pen/NWwwyQg?editors=1111

// 编辑：其他解决方案，在row

之后添加m-0class

<div class="row m-0"><div class="text-end col-6">ID:</div> <div class="text-start col-6">ID</div></div>
        <div class="row m-0"><div class="text-end col-6">Name:</div> <div class="text-start col-6">NAME</div></div>
        <div class="row m-0"><div class="text-end col-6">Email:</div> <div class="text-start col-6">EMAIL</div></div>
        <div class="row m-0"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">ACTIVE</div></div>

或者用classcontainer

包裹起来

<div class="container">
        <div class="row"><div class="text-end col-6">ID:</div> <div class="text-start col-6">ID</div></div>
        <div class="row"><div class="text-end col-6">Name:</div> <div class="text-start col-6">NAME</div></div>
        <div class="row"><div class="text-end col-6">Email:</div> <div class="text-start col-6">EMAIL</div></div>
        <div class="row"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">ACTIVE</div>
        </div>

如何禁用水平条

How to disable horizontal bar

bootstrap-5

sweetalert2