Как правильно раздвинуть кнопки?

Question

[uvv99]

Пытаюсь разнести кнопки по разным сторонам, применил у div { display: flex; justify-content: space-between; }, но кнопки не до конца раздвинуты. Как правильно сделать, кто может подсказать?

Comments

[Максим]

Это что там за ужасные цифры в отступах ? Вы где такую шляпу видели? Все расчёты должен делать браузер сам ...и ни каких 1500

[uvv99]

Brasileiro, если я убираю margin-left: 1500px;
margin-top: -400px; , то все плывет и располагается не так как надо..

[Максим]

uvv99, значит вы всё сделали не правильно и бутстрап в помойку ...современный css это всё умеет

[uvv99]

Brasileiro, это и так понятно)) а вот как сделать правильно, вот это вопрос..

[Ankhena]

Brasileiro, я уже сегодня писала целый трактат, начинающийся с валидатора, что нужно исправить перед тем, как заниматься адаптацией. Но это не помогло.

[uvv99]

Ankhena, ваш трактат был не совсем корректный, так как даже meta тег вы не заметили.. спасибо вам за отзыв!

[Ankhena]

uvv99, угу, старенькая стала, слепенькая, не заметила мета в простыне кода. Нет больше мне доверия.
;)

Да не, можете оставить как есть.

[Алексей Дубровин]

.btn1, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7, .btn8

Классы для того и существуют чтобы дублировать логику, как именно выглядит блок.
По этому класс 1, блоков с таким классом много.

.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover, .btn5:hover, .btn6:hover, .btn7:hover, .btn8:hover {
    background: #2c2a2a;
}
// А это лишняя работа.

[uvv99]

Алексей Дубровин, Вы лучше подскажите как поднять текст на верх и наложить его ровно на картинки?

[Алексей Дубровин]

uvv99, Я бы подсказал, если бы это было минимально валидно. А так в этом разбираться не хочу.

[uvv99]

Алексей Дубровин, зачем тогда вы тут пишите? ведь никто этого не просит, зачем продавать или предлагать косвенно свои курсы или "пакеты" обучений?! делайте это в других местах.

[Алексей Дубровин]

uvv99, Господе. Прочитайте зачем нужны классы. Минут 10 потратить. Это упростит ваш код в 2 раза.
Какие курсы. Это 1 что вообще есть в css. оно уже не правильно используется.

[Максим]

uvv99, по ходу я чуть не дооценил задачу - моя попытка - разумеется надо доработать: https://codepen.io/topicstarter/pen/vYeLgMy

[uvv99]

Brasileiro, спасибо, задача не простая. как должно выглядеть https://drive.google.com/file/d/1d7ALyXRJA2ic0AKgg...

! у меня фото не прикладывается, переписываюсь с поддержкой уже больше суток

[Ankhena]

uvv99, ваше фото
Нет, чтобы просто пересохранить, вместо того чтобы одну и туже пытаться вставить.

[Максим]

uvv99, ну это совсем другое дело, я завтра буду дома, попробую сделать,только надо макет, полный

[uvv99]

Brasileiro, выложу чуть позже, на том что остановился. Хотя надеюсь скоро победить его.
Да, этот сайт написал за 2-4 часа, а нужно что бы он был 100% адаптивный. Вот и переделываю все заново.

[Ankhena]

uvv99, держите пример и разметки и адаптива

[uvv99]

Ankhena, Благодарю. Сейчас посмотрю.

[uvv99]

Ankhena, да, круто, но мне немного не подходит, тк я делаю на css + bootstrap без culp и npm.

[Ankhena]

uvv99, в моей песочнице нет никакого Gulp (если он скрывался под псевдонимом culp) и npm. Там даже препроцессора нет, обычный CSS.

Использовать сейчас, при наличии флексов и гридов, бутстрап ради сетки ну такое себе...
Но вы можете переписать суть на классы бутстрапа, если вам так хочется. Заодно сравните количество кода ;)

[uvv99]

Ankhena, извиняюсь, не так открыл просто. правда извиняюсь.

[Ankhena]

uvv99, всё в порядке.

Надеюсь, к галпу вы придете.
Обычно это происходит очень быстро, после того как пару раз ручками засунете код в автопрефиксер и минификатор и пересохраните прод-версию. Или 10 раз внесете правки в футер на 10 страницах.
Но не торопитесь. Не нужен и ладно. Когда поймете, что пора - разберетесь.

Сейчас важнее семантика, валидатор, доступность, разумные стили и т.д.

[uvv99]

Ankhena, да, согласен, всему свое время. там вроде один раз прописать файл и постоянно его можно копировать.. этот курс пока прослушал, но не делал))
! я ваш код подшаманил под себя, что-то картинки никак не хотят правильно вставать..

[Ankhena]

uvv99,

что-то картинки никак не хотят правильно вставать

Без песочницы или ссылки на рабочую версию мне нечего сказать по этому поводу

[uvv99]

Ankhena,

Правильно, я понимаю, что с помощью media можно поменять px, что бы на большом ноуте (17,5) открывалось шире, во весь экран?

media (min-width: 550px) {
.wrap-1 {
grid-template-columns: 1fr 1fr;
}

.wrap-2 {
grid-template-columns: 1fr 1fr;
}

.news__item {
grid-template-columns: max-content 1fr;
gap: 20px;
}
}

media (min-width: 900px) {
.wrap-1 {
grid-template-columns: 1fr 2fr 1fr;
}

.wrap-2 {
grid-template-columns: 210px 1fr 210px;
}

.production {
order: revert;
grid-column: span 1;
}

.news {
order: revert;
grid-column: span 1;
}
}

[Ankhena]

uvv99, типа того
Только имейте в виду, что на "большом ноуте (17,5)" может оказаться разрешение 1600, а на 13" - 1920.

[uvv99]

Если указать 1900, то будет растягиваться на большом ноуте?

media (min-width: 550px) {
.wrap-1 {
grid-template-columns: 1fr 1fr;
}

.wrap-2 {
grid-template-columns: 1fr 1fr;
}

.news__item {
grid-template-columns: max-content 1fr;
gap: 20px;
}
}

media (min-width: 1900px) {
.wrap-1 {
grid-template-columns: 1fr 2fr 1fr;
}

.wrap-2 {
grid-template-columns: 210px 1fr 210px;
}

.production {
order: revert;
grid-column: span 1;
}

.news {
order: revert;
grid-column: span 1;
}
}

[uvv99]

Ankhena, https://uvv987.github.io/FACTORY/

[Ankhena]

uvv99, изучите свойства, начинающиеся на background- https://webref.ru/css
На некоторое время этого хватит.

Answer 1

[nowm]

Кнопки растягиваются корректно, но вы используете бутстрап и класс .container, и бутстрап ограничивает ширину этого элемента, потому что это служебный для бутстрапа класс и он для него прописывает много собственных стилей. Блоки с кнопками, соответственно, за пределы родительского контейнера не вылезают.

Как один из фиксов, класс container можно заменить на d-flex justify-content-between и они начнут нормально растягиваться.