」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > Bootstrap 類別「mb-0」如何影響元素的邊距?

Bootstrap 類別「mb-0」如何影響元素的邊距?

發佈於2024-11-04
瀏覽:690

How does the Bootstrap class \

了解Bootstrap 4 中的Class="mb-0"

Bootstrap 4 提供了全面的實用程式類,用於管理不同螢幕尺寸的邊距和填充,稱為mb (邊距底部)類別。這些類別為不同視窗設定元素間距提供了靈活性,如下所述:

理解class="mb-0"

class="mb-0 "專門針對元素的底部邊距並將其設為0。此類別屬於邊距實用程式類別,用於完全刪除底部邊距。

Bootstrap Margin and Padding Utility Class Format

Bootstrap對其邊距和填充實用程式類別使用一致的命名約定:

{property}{sides}-{size}{property }{sides}-{breakpoint}-{size}

屬性:

]
  • m 為邊距
  • p 為填充

側面:

  • t 為頂部
  • b 為底部
  • l 為左側
  • r 為右
  • x 為左和右
  • y 為頂部和底部

斷點:

  • xs 為
  • sm 為>=576px
  • md 為> =768px
  • lg 為>=992px
  • xl 為> =1200px

大小:

  • 0 將邊距或內邊距設定為0
  • 1 將邊距或內邊距設定為。 25rem (4px)
  • 2 將邊距或填滿設定為0.5rem (8px)
  • 3 將邊距或填滿設定為1rem (16px)
  • 4 設定邊距或padding 為1.5rem (24px)
  • 5 將邊距或邊距設定為3rem (48px)
  • auto 將邊距設定為auto

] 用法範例

Lorem ipsum

Lorem ipsum

此程式碼將class="mb-0" 應用於段落元素,刪除其下邊距。

其他資源

  • 有關更全面的信息,請參閱以下資源:
  • [Bootstrap 4.5 - 間距](https:/ /getbootstrap.com/docs/4.5/utilities/spacing/)

[w3schools:引導邊距與填滿類別](https://www.w3schools.com/bootstrap4/bootstrap_margin_padding.asp )How does the Bootstrap class \

最新教學 更多>
  • Python中range函數的使用技巧及示例
    Python中range函數的使用技巧及示例
    [2 [2 我的帖子解釋了zip()。 我的帖子解釋了枚舉()。 *備忘錄: 第一個參數是開始(可選 - 默認:0-Type:int)。 第二個參數是stop(必需類型:int)。 第三參數是步驟(可選 - 默認:1-Type:int)。 start =,stop = and step ...
    程式設計 發佈於2025-04-18
  • Python讀取CSV文件UnicodeDecodeError終極解決方法
    Python讀取CSV文件UnicodeDecodeError終極解決方法
    在試圖使用已內置的CSV模塊讀取Python中時,CSV文件中的Unicode Decode Decode Decode Decode decode Error讀取,您可能會遇到錯誤的錯誤:無法解碼字節 在位置2-3中:截斷\ uxxxxxxxx逃脫當CSV文件包含特殊字符或Unicode的路徑逃...
    程式設計 發佈於2025-04-18
  • 為什麼不使用CSS`content'屬性顯示圖像?
    為什麼不使用CSS`content'屬性顯示圖像?
    在Firefox extemers屬性為某些圖像很大,&& && && &&華倍華倍[華氏華倍華氏度]很少見,卻是某些瀏覽屬性很少,尤其是特定於Firefox的某些瀏覽器未能在使用內容屬性引用時未能顯示圖像的情況。這可以在提供的CSS類中看到:。 googlepic { 內容:url(&...
    程式設計 發佈於2025-04-18
  • 如何避免Go語言切片時的內存洩漏?
    如何避免Go語言切片時的內存洩漏?
    ,a [j:] ...雖然通常有效,但如果使用指針,可能會導致內存洩漏。這是因為原始的備份陣列保持完整,這意味著新切片外部指針引用的任何對象仍然可能佔據內存。 copy(a [i:] 對於k,n:= len(a)-j i,len(a); k
    程式設計 發佈於2025-04-18
  • 查找當前執行JavaScript的腳本元素方法
    查找當前執行JavaScript的腳本元素方法
    如何引用當前執行腳本的腳本元素在某些方案中理解問題在某些方案中,開發人員可能需要將其他腳本動態加載其他腳本。但是,如果Head Element尚未完全渲染,則使用document.getElementsbytagname('head')[0] .appendChild(v)的常規方...
    程式設計 發佈於2025-04-18
  • JavaScript中如何動態訪問全局變量?
    JavaScript中如何動態訪問全局變量?
    在JavaScript 一種方法是使用窗口對象存儲和檢索變量。通過引用全局範圍,可以使用其名稱動態訪問變量。 //一個腳本 var somevarname_10 = 20; //另一個腳本 window.all_vars = {}; window.all_vars ['somevarna...
    程式設計 發佈於2025-04-18
  • 為什麼在我的Linux服務器上安裝Archive_Zip後,我找不到“ class \” class \'ziparchive \'錯誤?
    為什麼在我的Linux服務器上安裝Archive_Zip後,我找不到“ class \” class \'ziparchive \'錯誤?
    Class 'ZipArchive' Not Found Error While Installing Archive_Zip on Linux ServerSymptom:When attempting to run a script that utilizes the ZipAr...
    程式設計 發佈於2025-04-18
  • 如何從PHP中的數組中提取隨機元素?
    如何從PHP中的數組中提取隨機元素?
    從陣列中的隨機選擇,可以輕鬆從數組中獲取隨機項目。考慮以下數組:; 從此數組中檢索一個隨機項目,利用array_rand( array_rand()函數從數組返回一個隨機鍵。通過將$項目數組索引使用此鍵,我們可以從數組中訪問一個隨機元素。這種方法為選擇隨機項目提供了一種直接且可靠的方法。
    程式設計 發佈於2025-04-18
  • Python高效去除文本中HTML標籤方法
    Python高效去除文本中HTML標籤方法
    在Python中剝離HTML標籤,以獲取原始的文本表示Achieving Text-Only Extraction with Python's MLStripperTo streamline the stripping process, the Python standard librar...
    程式設計 發佈於2025-04-18
  • 您如何在Laravel Blade模板中定義變量?
    您如何在Laravel Blade模板中定義變量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配變量對於存儲以後使用的數據至關重要。在使用“ {{}}”分配變量的同時,它可能並不總是最優雅的解決方案。 幸運的是,Blade通過@php Directive提供了更優雅的方法: $ old_section =...
    程式設計 發佈於2025-04-18
  • C++類成員顯式特化為何在命名空間外失敗?
    C++類成員顯式特化為何在命名空間外失敗?
    在命名空間範圍外的顯著專業:非標準G c模板編程中的一個錯誤涉及對高效代碼生成的類成員的明確專業化。但是,如以下代碼段所示,顯式專業的放置至關重要: Template 班級 { // ... 模板 void驗證(int位置,int約束[]) { } ...
    程式設計 發佈於2025-04-18
  • PHP與C++函數重載處理的區別
    PHP與C++函數重載處理的區別
    作為經驗豐富的C開發人員脫離謎題,您可能會遇到功能超載的概念。這個概念雖然在C中普遍,但在PHP中構成了獨特的挑戰。讓我們深入研究PHP功能過載的複雜性,並探索其提供的可能性。 在PHP中理解php的方法在PHP中,函數超載的概念(如C等語言)不存在。函數簽名僅由其名稱定義,而與他們的參數列表無關...
    程式設計 發佈於2025-04-18
  • 在Java中使用for-to-loop和迭代器進行收集遍歷之間是否存在性能差異?
    在Java中使用for-to-loop和迭代器進行收集遍歷之間是否存在性能差異?
    For Each Loop vs. Iterator: Efficiency in Collection TraversalIntroductionWhen traversing a collection in Java, the choice arises between using a for-...
    程式設計 發佈於2025-04-18
  • 如何將MySQL數據庫添加到Visual Studio 2012中的數據源對話框中?
    如何將MySQL數據庫添加到Visual Studio 2012中的數據源對話框中?
    在Visual Studio 2012 儘管已安裝了MySQL Connector v.6.5.4,但無法將MySQL數據庫添加到實體框架的“ DataSource對話框”中。為了解決這一問題,至關重要的是要了解MySQL連接器v.6.5.5及以後的6.6.x版本將提供MySQL的官方Visual...
    程式設計 發佈於2025-04-18
  • 如何在GO編譯器中自定義編譯優化?
    如何在GO編譯器中自定義編譯優化?
    在GO編譯器中自定義編譯優化 GO中的默認編譯過程遵循特定的優化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...
    程式設計 發佈於2025-04-18

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3