如何禁用水平条

Question

我正在使用Sweetalert2和Bootstra5.1.3。我正试着把甜酒装饰成下面的样子：

        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样式，在我检查可以使用的容器类名是.swal2-html-container之后。

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

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

//编辑:其他解决方案，在m-0之后添加row类

<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>

或者用类container包装它

<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>