我必须使用bootstrap3在按钮单击时创建动态div

Question

如上图所示，当用户点击“添加”按钮时，我需要添加如上所示的div。这里的困难是我需要使用自举来做它，即所有的div应该根据分辨率重新排列，即1920x900,1280x600,980x1280,800x1280,768x1024,360x640。 请告诉我如何才能做到这一点。任何帮助表示赞赏。

Answer 1

这一切都是关于在DIV上正确设置网格类，并且在调整屏幕大小时它们应该重新排列。例如，如果您希望在中等屏幕上每行4个DIV，则可以执行以下操作：

<div class="col-md-3"></div>

然后，如果您只想在小屏幕上每行3个DIV，则添加另一个类......

<div class="col-md-3 col-sm-4"></div>

最后，在最小的设备上获得两个DIV ......（＆lt; 768px）

<div class="col-md-3 col-sm-4 col-xs-6"></div>

解释一切here。

至于按钮点击添加DIV，这非常简单，在Google上查看，您将能够找到几个示例。

Answer 2

单击here以了解Bootstrap的网格系统。基本上我们说最大宽度是12，所以如果你想要4个宽度相等的容器，你只需将12除以4即3。因此col-xs-3 col-sm-3 col-md-3是我们想要添加到每个div的类。

我已经快速举例说明了它是如何工作的。

＆＃13;

＆＃13;

$('#add').click(function(){
    $('.container .row').append('<div class="col-xs-3 col-sm-3 col-md-3">Div 1</div><div class="col-xs-3 col-sm-3 col-md-3">Div 2</div><div class="col-xs-3 col-sm-3 col-md-3">Div 3</div><div class="col-xs-3 col-sm-3 col-md-3">Div 4</div>');
});

＆＃13;

.col-md-3{
    height: 100px;
    background-color:rgb(230,230,230);
    text-align:center;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="button" id="add" class="btn btn-primary">Click me!</button>

<div class="container">
    <div class="row">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;