如何避免為某些特定區域重置段落和串列項樣式，而無需為每個區域設定自定義類？-有解無憂

默認情況下，Bootstrap 將段落邊距設定為零，它還會從串列中洗掉默認樣式（例如填充/專案符號）。

他們這樣做的原因得到了很好的解釋，非常清晰易懂。

用例：我們在頁面上有一段用戶生成的內容，應用了 Bootstrap 5 樣式；此部分包含段落和串列，我們希望以默認樣式顯示它們（例如：段落有邊距，串列有專案符號等）。

問題：有沒有什么辦法可以做到這一點，而無需為每個段落/串列分配類，也無需將這些樣式重新定義回原始樣式？

最好的解決方案是一些應用于包裝器的類，它將默認樣式應用于所有子元素（即“重置重置”），但閱讀 Bootstrap 檔案并沒有幫助。

謝謝。

uj5u.com熱心網友回復：

您可以將內容包裝在單個元素中并使用revert撤消 Bootstrap 的重置。

.normal-typography p,
.normal-typography h2,
.normal-typography ul {
  margin: revert;
  padding: revert;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="normal-typography">
  <h2>Headings and paragraphs</h2>

  <p>All heading elements—e.g., <code>&lt;h1&gt;</code>—and <code>&lt;p&gt;</code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p>

  <ul>
    <li>All lists have their top margin removed</li>
    <li>And their bottom margin normalized</li>
    <li>Nested lists have no bottom margin
      <ul>
        <li>This way they have a more even appearance</li>
        <li>Particularly when followed by more list items</li>
      </ul>
    </li>
    <li>The left padding has also been reset</li>
  </ul>

  <p>The <code>&lt;hr&gt;</code> element has been simplified. Similar to browser defaults, <code>&lt;hr&gt;</code>s are styled via <code>border-top</code>, have a default <code>opacity: .25</code>, and automatically inherit their <code>border-color</code>    via <code>color</code>, including when <code>color</code> is set via the parent. They can be modified with text, border, and opacity utilities.</p>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507470.html

標籤：css 推特引导引导程序 5

上一篇：引導下拉事件未觸發

下一篇：Bootstrap-列的垂直對齊不起作用