Ви вже використовуєте Bootstrap, тому, якщо вам подобається SCSS, ви можете використати один із існуючих мікшинів Bootstrap для створення власної 7-стовпкової системи сітки з класами, які масштабуються до певного контейнера.
my_custom_app.scss:
@import '../node_modules/bootstrap/scss/bootstrap';
$grid-columns: 7;
$grid-gutter-width: 4px;
#task_week {
@include make-grid-columns();
}
Коли ви компілюєте my_custom_app.scss , mixin автоматично генерує всі col-xкласи, які вам потрібні, у результуючому файлі CSS, який я включив сюди повністю для тих, хто слабким серцем:
#task_week {}
#task_week .col-1, #task_week .col-2, #task_week .col-3, #task_week .col-4, #task_week .col-5, #task_week .col-6, #task_week .col-7, #task_week .col-8, #task_week .col-9, #task_week .col-10, #task_week .col-11, #task_week .col-12, #task_week .col,
#task_week .col-auto, #task_week .col-sm-1, #task_week .col-sm-2, #task_week .col-sm-3, #task_week .col-sm-4, #task_week .col-sm-5, #task_week .col-sm-6, #task_week .col-sm-7, #task_week .col-sm-8, #task_week .col-sm-9, #task_week .col-sm-10, #task_week .col-sm-11, #task_week .col-sm-12, #task_week .col-sm,
#task_week .col-sm-auto, #task_week .col-md-1, #task_week .col-md-2, #task_week .col-md-3, #task_week .col-md-4, #task_week .col-md-5, #task_week .col-md-6, #task_week .col-md-7, #task_week .col-md-8, #task_week .col-md-9, #task_week .col-md-10, #task_week .col-md-11, #task_week .col-md-12, #task_week .col-md,
#task_week .col-md-auto, #task_week .col-lg-1, #task_week .col-lg-2, #task_week .col-lg-3, #task_week .col-lg-4, #task_week .col-lg-5, #task_week .col-lg-6, #task_week .col-lg-7, #task_week .col-lg-8, #task_week .col-lg-9, #task_week .col-lg-10, #task_week .col-lg-11, #task_week .col-lg-12, #task_week .col-lg,
#task_week .col-lg-auto, #task_week .col-xl-1, #task_week .col-xl-2, #task_week .col-xl-3, #task_week .col-xl-4, #task_week .col-xl-5, #task_week .col-xl-6, #task_week .col-xl-7, #task_week .col-xl-8, #task_week .col-xl-9, #task_week .col-xl-10, #task_week .col-xl-11, #task_week .col-xl-12, #task_week .col-xl,
#task_week .col-xl-auto, #task_week .col-1, #task_week .col-2, #task_week .col-3, #task_week .col-4, #task_week .col-5, #task_week .col-6, #task_week .col-7, #task_week .col,
#task_week .col-auto, #task_week .col-sm-1, #task_week .col-sm-2, #task_week .col-sm-3, #task_week .col-sm-4, #task_week .col-sm-5, #task_week .col-sm-6, #task_week .col-sm-7, #task_week .col-sm,
#task_week .col-sm-auto, #task_week .col-md-1, #task_week .col-md-2, #task_week .col-md-3, #task_week .col-md-4, #task_week .col-md-5, #task_week .col-md-6, #task_week .col-md-7, #task_week .col-md,
#task_week .col-md-auto, #task_week .col-lg-1, #task_week .col-lg-2, #task_week .col-lg-3, #task_week .col-lg-4, #task_week .col-lg-5, #task_week .col-lg-6, #task_week .col-lg-7, #task_week .col-lg,
#task_week .col-lg-auto, #task_week .col-xl-1, #task_week .col-xl-2, #task_week .col-xl-3, #task_week .col-xl-4, #task_week .col-xl-5, #task_week .col-xl-6, #task_week .col-xl-7, #task_week .col-xl,
#task_week .col-xl-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 2px;
padding-left: 2px; }
#task_week .col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-first {
order: -1; }
#task_week .order-last {
order: 8; }
#task_week .order-0 {
order: 0; }
#task_week .order-1 {
order: 1; }
#task_week .order-2 {
order: 2; }
#task_week .order-3 {
order: 3; }
#task_week .order-4 {
order: 4; }
#task_week .order-5 {
order: 5; }
#task_week .order-6 {
order: 6; }
#task_week .order-7 {
order: 7; }
#task_week .offset-1 {
margin-left: 14.2857142857%; }
#task_week .offset-2 {
margin-left: 28.5714285714%; }
#task_week .offset-3 {
margin-left: 42.8571428571%; }
#task_week .offset-4 {
margin-left: 57.1428571429%; }
#task_week .offset-5 {
margin-left: 71.4285714286%; }
#task_week .offset-6 {
margin-left: 85.7142857143%; }
@media (min-width: 576px) {
#task_week .col-sm {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-sm-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-sm-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-sm-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-sm-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-sm-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-sm-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-sm-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-sm-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-sm-first {
order: -1; }
#task_week .order-sm-last {
order: 8; }
#task_week .order-sm-0 {
order: 0; }
#task_week .order-sm-1 {
order: 1; }
#task_week .order-sm-2 {
order: 2; }
#task_week .order-sm-3 {
order: 3; }
#task_week .order-sm-4 {
order: 4; }
#task_week .order-sm-5 {
order: 5; }
#task_week .order-sm-6 {
order: 6; }
#task_week .order-sm-7 {
order: 7; }
#task_week .offset-sm-0 {
margin-left: 0; }
#task_week .offset-sm-1 {
margin-left: 14.2857142857%; }
#task_week .offset-sm-2 {
margin-left: 28.5714285714%; }
#task_week .offset-sm-3 {
margin-left: 42.8571428571%; }
#task_week .offset-sm-4 {
margin-left: 57.1428571429%; }
#task_week .offset-sm-5 {
margin-left: 71.4285714286%; }
#task_week .offset-sm-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 768px) {
#task_week .col-md {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-md-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-md-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-md-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-md-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-md-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-md-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-md-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-md-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-md-first {
order: -1; }
#task_week .order-md-last {
order: 8; }
#task_week .order-md-0 {
order: 0; }
#task_week .order-md-1 {
order: 1; }
#task_week .order-md-2 {
order: 2; }
#task_week .order-md-3 {
order: 3; }
#task_week .order-md-4 {
order: 4; }
#task_week .order-md-5 {
order: 5; }
#task_week .order-md-6 {
order: 6; }
#task_week .order-md-7 {
order: 7; }
#task_week .offset-md-0 {
margin-left: 0; }
#task_week .offset-md-1 {
margin-left: 14.2857142857%; }
#task_week .offset-md-2 {
margin-left: 28.5714285714%; }
#task_week .offset-md-3 {
margin-left: 42.8571428571%; }
#task_week .offset-md-4 {
margin-left: 57.1428571429%; }
#task_week .offset-md-5 {
margin-left: 71.4285714286%; }
#task_week .offset-md-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 992px) {
#task_week .col-lg {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-lg-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-lg-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-lg-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-lg-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-lg-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-lg-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-lg-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-lg-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-lg-first {
order: -1; }
#task_week .order-lg-last {
order: 8; }
#task_week .order-lg-0 {
order: 0; }
#task_week .order-lg-1 {
order: 1; }
#task_week .order-lg-2 {
order: 2; }
#task_week .order-lg-3 {
order: 3; }
#task_week .order-lg-4 {
order: 4; }
#task_week .order-lg-5 {
order: 5; }
#task_week .order-lg-6 {
order: 6; }
#task_week .order-lg-7 {
order: 7; }
#task_week .offset-lg-0 {
margin-left: 0; }
#task_week .offset-lg-1 {
margin-left: 14.2857142857%; }
#task_week .offset-lg-2 {
margin-left: 28.5714285714%; }
#task_week .offset-lg-3 {
margin-left: 42.8571428571%; }
#task_week .offset-lg-4 {
margin-left: 57.1428571429%; }
#task_week .offset-lg-5 {
margin-left: 71.4285714286%; }
#task_week .offset-lg-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 1200px) {
#task_week .col-xl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-xl-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-xl-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-xl-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-xl-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-xl-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-xl-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-xl-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-xl-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-xl-first {
order: -1; }
#task_week .order-xl-last {
order: 8; }
#task_week .order-xl-0 {
order: 0; }
#task_week .order-xl-1 {
order: 1; }
#task_week .order-xl-2 {
order: 2; }
#task_week .order-xl-3 {
order: 3; }
#task_week .order-xl-4 {
order: 4; }
#task_week .order-xl-5 {
order: 5; }
#task_week .order-xl-6 {
order: 6; }
#task_week .order-xl-7 {
order: 7; }
#task_week .offset-xl-0 {
margin-left: 0; }
#task_week .offset-xl-1 {
margin-left: 14.2857142857%; }
#task_week .offset-xl-2 {
margin-left: 28.5714285714%; }
#task_week .offset-xl-3 {
margin-left: 42.8571428571%; }
#task_week .offset-xl-4 {
margin-left: 57.1428571429%; }
#task_week .offset-xl-5 {
margin-left: 71.4285714286%; }
#task_week .offset-xl-6 {
margin-left: 85.7142857143%; } }
#task_week div {
text-align: center; }
#task_week div .dow_day {
display: block;
font-size: 16px;
color: #4be4ff;
font-weight: normal; }
#task_week div .dow_date {
font-size: 12px;
display: block;
margin: 0;
margin-bottom: 10px;
font-weight: normal; }
#task_week .list-group-item, #task_week .list-group-item * {
cursor: pointer; }
#task_week .list-group-item:hover {
background-color: #161919; }
#task_week .col:not(:last-child) {
border-right: 1px solid #444;
margin-bottom: 20px; }
Нарешті, у своєму HTML ви просто визначаєте свій div та стовпці обгортки так само, як і сітку із 12-стовпців за замовчуванням:
<div id="task_week">
<div class="row no-gutters">
<div class="col-sm-7 col-lg-1">Monday</div>
<div class="col-sm-7 col-lg-1">Tuesday</div>
<div class="col-sm-7 col-lg-1">Wednesday</div>
<div class="col-sm-7 col-lg-1">Thursday</div>
<div class="col-sm-7 col-lg-1">Friday</div>
<div class="col-sm-7 col-lg-1">Saturday</div>
<div class="col-sm-7 col-lg-1">Sunday</div>
</div>
</div>
<title>згенерованого Stackoverflow для цього повідомлення: "jquery - 7 рівних стовпців у bootstrap - Переповнення стека" .