bootstrap4 Reboot details summary 美化（点选机制选中，单行隐藏角标，多行后移）

原始HTML

<details>
    <summary>Some details</summary>
    <p>More info about the details.</p>
</details>

 原始效果

 原始效果演示 点击 https://v4.bootcss.com/docs/4.0/content/reboot/#summary

新HTML（增加class="single-line"）

<h4>单行</h4>
<details>
    <summary class="single-line">Some details</summary>
</details>
<br />
<h4>多行</h4>
<details>
    <summary>Some details</summary>
    <p>More info about the details.</p>
</details>

美化效果

增加CSS

details summary {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}

    details summary + p {
        padding-left: 1.35em;
    }

    details summary:focus {
        outline: none;
    }

/*Chrome*/
details > summary.single-line::-webkit-details-marker {
    visibility: hidden;
}
/*Firefox*/
details > summary.single-line:first-of-type {
    list-style: none inside url(data:image/gif;base64,R0lGODlhCgABAIAAAP///wAAACH5BAEAAAAALAAAAAAKAAEAAAIDhI8FADs=);
}

如非上述描述的效果，请自行调整，欢迎留言与我交流。