如何将引导网格系统应用于动态扩展 div 而不是窗口答案

【问题标题】：How to apply the bootstrap grid system for dynamic expanding div instead of window如何将引导网格系统应用于动态扩展 div 而不是窗口
【发布时间】：2015-12-03 09:23:10
【问题描述】：

我正面临将引导网格样式应用于动态扩展 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>

【问题讨论】：

请解释一下你想做什么？您希望最大可扩展宽度成为您应用的样式宽度？
这里我有一个带有“col-md-2”的引导中等风格。当 div 扩展到引导程序中等限制大小时，我需要。 'col-md-2' 类型的网格显示在那里。

标签： jquery html twitter-bootstrap css

【解决方案1】：

您的看法有些错误。 Bootstrap Grid System 使用媒体查询，它基于您的整个视口宽度，而不是相对于容器的宽度。所以在你上面的代码 sn-p 中，如果你点击“全屏”（即使没有按下按钮使其变宽），你会看到你的 md 样式已被应用（使文本被压扁，你真的不这样做'不想要）。

我确信有一些聪明的方法可以用 CSS 做你想做的事，但恐怕我不确定，你在这里尝试使用 Grid 系统做的事情并不是 Bootstrap 的设计初衷做。您可能必须构建一些自定义 Javascript 来测量元素的宽度并以这种方式动态更改类。

【讨论】：