Как сделать отзывчивым?

Question

Я новичок в работе с интерфейсом и делает сайты отзывчивыми, поэтому мне интересно, как я буду следить за тем, чтобы независимо от размера экрана пространство между элементами всегда было 20 пикселей.

Например, когда экран не изменить его размер, выглядит отлично:

Однако, когда я изменить его немного вниз, пространство между каждым элементом исчезает.

Затем, когда она изменяется дальше он идет до 2 штук в ряд, который является то, что я хочу, но я только хочу, чтобы быть 20px между пунктами в отличие от, как они выглядят следующим образом:

Я использую самозагрузку 3 и отображение элементов в следующем:

<div class="col-md-3 col-sm-6" id="animateslide"> 

    <div class="article" id="testarticediv" > 

    Items being displayed here.... 
    </div> 
</div> 

Я добавил следующее в свой собственный файл main.css:

@media(min-width:768px){} 
@media(min-width:992px){} 
@media(min-width:1200px){} 

Answer 1

Это может быть достигнуто путем установки ширины DIV/коробки с помощью CSS известково свойства, это логика, чтобы установить ширину каждого DIV, что сделает 20px пространство всех размеров экрана:

ширина: известково ((полная ширина - общая расчетная площадь b/w сетки)/общее количество: сетки);

/* Four Column Layout */ 
@media(min-width:1200px){ 
    width: calc((100% - (20px * 3))/4); 
} 


/* Three Column Layout */ 
@media(min-width:800px){ 
    width: calc((100% - (20px * 2))/3); 
} 

/* Two Column Layout */ 
@media(min-width:650px){ 
    width: calc((100% - (20px * 1))/2); 
} 

Answer 2

Вы пробовали заполнить каждый элемент 10px на соответствующих границах? Два элемента с дополнением 10px рядом друг с другом равны 20px.

Answer 3

Просто добавьте к каждой коробке:

margin: 0px 10px; 

Это позволит установить верхние и нижние границы до 0 (изменить это к тому, что вы хотите) и установить левые и правые поля на 10px. Затем должно быть 20px значение полей между каждым элементом.