я должен создавать динамические дивы на кнопку мыши, используя bootstrap3

Question

Как видно из приведенной выше картинке мне нужно добавить DIV, как показано выше, когда пользователь нажимает на кнопку Добавить. Трудность здесь заключается в том, что мне нужно сделать это с помощью бутстрапа, то есть все div должны переупорядочиваться на основе разрешения, то есть для 1920x900, 1280x600, 980x1280, 800x1280, 768x1024, 360x640. Дайте мне знать, как я могу это сделать. Любая помощь приветствуется.

Answer 1

Нажмите here, чтобы узнать о системе сетки Bootstrap. В основном мы говорим, что максимальная ширина равна 12, поэтому, если вы хотите 4 контейнера с равной шириной, вы просто разделите 12 на 4, что равно 3. Поэтому col-xs-3 col-sm-3 col-md-3 - это классы, которые мы хотим добавить к каждому div.

Я сделал быстрый пример того, как это может работать.

$('#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>'); 
 
});

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

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

Answer 2

Это все о том, как правильно настроить классы вашей сетки на DIV, и они должны измениться при изменении размера экрана. Например, если вы хотите 4 DIVs в ряд на средний экране, вы могли бы сделать это:

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

Тогда, если вы хотите только 3 DIVs в ряд на маленьких экранах, можно добавить еще один класс ...

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

И, наконец, чтобы получить два DIVs на самых маленьких устройств ... (< 768px)

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

Все объясняется here.

Что касается добавления DIV на кнопку, это очень просто, посмотрите на Google, и вы сможете найти несколько примеров.