В фреймворке Bootstrap есть возможность создавать адаптивные сетки с помощью классов "col-xs", "col-sm", "col-md" и "col-lg". Каждый класс определяет ширину колонки для соответствующего диапазона экранов.
Чтобы создать колонку с шириной между "col-sm-1" и "col-sm-2", вы можете использовать пользовательский класс и переопределить стили фреймворка.
Вот как вы можете это сделать:
1. Добавьте пользовательские классы для колонки, например "custom-col".
<div class="row">
<div class="custom-col">
<!-- Ваше содержимое колонки -->
</div>
</div>
2. Определите пользовательские стили для класса "custom-col" в вашем файле CSS.
.custom-col {
flex: 0 0 15%; /* Ширина колонки будет около 15% от родительского контейнера */
max-width: 15%;
}
Здесь мы использовали свойство "flex" для задания ширины колонки. Значение "0 0 15%" означает, что колонка не будет увеличиваться или уменьшаться, и ее ширина будет оставаться фиксированной при любых изменениях размера экрана. Максимальная ширина задается при помощи свойства "max-width".
3. Подключите ваш файл CSS к своему HTML-документу.
<link rel="stylesheet" href="path/to/your/custom-styles.css">
Теперь ваша колонка будет иметь ширину, примерно равную 15% от родительского контейнера, что находится между "col-sm-1" и "col-sm-2".
Обратите внимание, что использование пользовательских стилей может разрушить адаптивность и сетку Bootstrap, поэтому рекомендуется использовать их с осторожностью и тестируя на различных устройствах и экранах.