【Bootstrap4隱藏列】輕鬆掌握CSS技巧，實現動態列顯示與隱藏

Bootstrap是一個廣泛利用的開源前端框架，它供給了很多便捷的東西跟組件來幫助開辟者構建呼應式跟互動式網頁。其中，Bootstrap4中的柵格體系是構建網頁規劃的核心，它容許開辟者經由過程簡單的類名來創建呼應式的網格規劃。本文將具體介紹如何在Bootstrap4中經由過程CSS技能實現列的靜態表現與暗藏。

柵格體系簡介

Bootstrap4的柵格體系基於Flexbox，它容許開辟者經由過程行（row）跟列（column）類來創建呼應式規劃。每個行元素包含一個或多個列元素，列元素經由過程增加差其余類名來定義其在差別屏幕尺寸下的寬度。

暗藏列的基本方法

在Bootstrap4中，要暗藏列，最簡單的方法是給列元素增加一個類 .d-none，這個類在全部屏幕尺寸下都會使元素弗成見。

<div class="col-12 col-md-6 col-lg-4 d-none">這是要暗藏的列內容</div>

這段代碼中的列在桌面視圖（大年夜屏幕）下將會暗藏。

媒體查詢（Media Queries）實現靜態暗藏

為了實現更機動的把持，可能利用媒體查詢來根據差其余屏幕尺寸靜態表現或暗藏列。

<div class="col-12 col-md-6 col-lg-4">這是在全部屏幕尺寸下都表現的列內容</div>

@media (max-width: 768px) {
    .col-lg-4 {
        display: none;
    }
}

在這個例子中，當屏幕寬度小於或等於768px時，col-lg-4 類的列將不再表現。

利用JavaScript把持列表現與暗藏

除了CSS方法，還可能利用JavaScript來靜態地把持列的表現與暗藏。

<div class="col-12 col-md-6 col-lg-4" id="myColumn">這是可能經由過程JavaScript把持的列內容</div>
<button onclick="toggleColumn()">點擊暗藏/表現列</button>

<script>
    function toggleColumn() {
        var column = document.getElementById('myColumn');
        if (column.style.display === 'none') {
            column.style.display = 'block';
        } else {
            column.style.display = 'none';
        }
    }
</script>

在這個例子中，點擊按鈕將切換列的表近況況。

現實利用案例

假設我們有一個產品列表，我們盼望在桌面視圖下表現全部產品信息，而在挪動視圖下只表現產品稱號。

<div class="row">
    <div class="col-12 col-md-6">
        <div class="product-info">
            <h3>產品稱號</h3>
            <p>產品描述...</p>
        </div>
    </div>
    <div class="col-12 col-md-6 d-none">
        <div class="product-info">
            <h3>產品稱號</h3>
            <p>產品描述...</p>
        </div>
    </div>
</div>

在挪動視圖下，第二個列將會暗藏，而在桌面視圖下則表現。

總結

經由過程以上方法，我們可能輕鬆地在Bootstrap4中實現列的靜態表現與暗藏。機動應用CSS跟JavaScript，可能創建愈加靜態跟互動式的網頁規劃。在現實開辟中，可能根據具體須要抉擇合適的方法來實現列的表現與暗藏。