了解 Bootstrap 間距實用程式類別
Bootstrap 提供全面的間距實用程式類別來控制元素的邊距和填充。這些類別簡化了佈局中調整空白的過程。
語法
間距實用程式類別的語法在不同的 Bootstrap 版本中不斷發展。
Bootstrap 4
邊距： m{sides}-{size}
填充： p{ sides}-{size}
Bootstrap 5
邊距： m{sides}-{size}（使用me- m{sides}-{size}（使用me-
、ms-、pe -, ps-
)<div class="m-b-lg">...</div> <!-- margin-bottom-large --> <div class="p-t-3">...</div> <!-- padding-top-3 -->
填充: p{sides}-{size}
<div class="me-3">...</div> <!-- margin-end-3 --> <div class="ps-1">...</div> <!-- padding-start-1 -->
引導程式4：
m{sides}-{breakpoint}-{size}
p{sides}-{breakpoint}-{size}引導程式5：
<div class="mt-md-2">...</div> <!-- margin-top-2 on medium screens or larger -->
<code class="javascript">import React, { Component } from 'react';
class Example extends Component {
render() {
return (
<div className="m-b-lg">
{/* Your content */}
</div>
);
}
}
export default Example;</code>引導程式4 實現響應斷點的響應式間距實用程式類別。語法為：
範例：React 中的用法使用實用程式在React 中，您可以在元素上設定className 屬性。例如：注意：在 Bootstrap 4 中，您可能需要安裝一個外掛程式來啟用對間距實用程式類別的支援。請參閱 Bootstrap 文件以獲取更多資訊。以上是如何使用 Bootstrap 間距實用程式類別來控制佈局中的邊距和填充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
