我在将 Bootstrap 网格样式应用于动态扩展 div 时遇到了问题。
虽然单击按钮时容器 div 会扩展，但当它达到中等宽度时，中等网格样式不会应用。
这是我应用 Bootstrap 样式的代码。
<!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>最佳答案
您的看法有点不对。 Bootstrap 网格系统使用媒体查询，它基于整个视口(viewport)宽度，而不是相对于容器的宽度。因此，在上面的代码片段中，如果您点击“全屏”(即使没有按下按钮使其变宽)，您将看到您的 md 样式已被应用(使文本被压扁，您真的不想)。
我确信有一些聪明的方法可以用 CSS 做你想做的事，但恐怕我不确定，当然你在这里尝试使用网格系统做的事情并不是 Bootstrap 的设计目标做。您可能必须构建一些自定义 Javascript 来测量元素的宽度并以这种方式动态更改类。
关于jquery - 如何应用bootstrap网格系统动态扩展div而不是window，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34062097/