Question

我面临的问题是将引导网格样式应用于动态扩展div。

按钮单击容器div扩展但中等网格样式在达到中等宽度时不应用。

这是我的代码，用于应用引导程序样式。

＆＃13;

<!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>

＆＃13;

Answer 1

你看这个有点不对劲。 Bootstrap网格系统使用媒体查询，它基于您的整个视口宽度，而不是相对于容器的宽度。所以在上面的代码片段中，如果你点击“全屏”（即使没有按下按钮使其更宽），你会看到你的md样式已被应用（使文本被压扁，你真的不喜欢'我想）。

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

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

1 个答案: