如何將引導網格系統應用於動態擴展div而不是窗口

Question

我面臨將引導網格樣式應用於動態擴展div的問題。

在單擊按鈕時，容器div會擴展，但當達到中等寬度時，不會應用中等網格狀樣式。

在這里，我的代碼將應用引導樣式。

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $(".my").removeClass("container"); $(".my").addClass("container"); $("#chg").width($("#chg").width()+10); }); }); </script> </head> <body> <button>Display the width of div</button> <div class="my container" id="chg" style="width:300px;background-color:pink;position:absolute;"> <div class="row"> <div class="col-sm-4 col-md-2"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4 col-md-2"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4 col-md-2"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> </div> </div> </body> </html>

Answer 1

您正在看這個略有錯誤的地方。 Bootstrap網格系統使用媒體查詢，該查詢基於您的整個視口寬度，而不是相對於容器的寬度。 因此，在上面的代碼段中，如果您單擊“全屏”（即使不按按鈕即可使其更寬），您也會看到已應用md樣式（壓縮文本，這是您真正不想要的）。

我敢肯定有一些聰明的方法可以完成CSS所需的工作，但是恐怕我不確定，當然，您在此處嘗試使用Grid系統執行的操作不是Bootstrap旨在完成的。 您可能必須構建一些自定義Javascript來測量元素的寬度並以這種方式動態更改類。

如何將引導網格系統應用於動態擴展div而不是窗口

問題描述

1 個解決方案

解決方案1
0 2015-12-03 10:58:42

如何將引導網格系統應用於動態擴展div而不是窗口

問題描述

1 個解決方案

解決方案1 0 2015-12-03 10:58:42

解決方案1
0 2015-12-03 10:58:42