Арсений Матыцин

background: linear/radial/и т.д.-gradient.

Дело не в бутстрапе, там перечислены те же свойства, если описывать прилипающий контент вручную. А ломает эту логику overflow-ы. Ищи, где в родителях обрезка видимости.

Можно. Убрать overflow.

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

Все работает, а вот пути у тебя забиты неправильно.

1. Пункт 3.8. правил сервиса.
2. Такое происходит, когда контент больше ширины экрана, поэтому он и увеличивает область видимости.

Как запутаться в трех соснах.

Решение →

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

Дописать для этого стили.

Дешево и сердито, использовать JS-фреймворк с роутами (Vue\React...). Можно и без роутов, на компоненте, тут не столь важно.

Долго и скорее всего не будет смысла — на JS без фреймворка: получать event.target и все несовпадающее элементы убирать. А этому давать класс, который раскрое скрытую информацию, или на JS добавит откуда-то (объекта в памяти или по get-запросу в API)

1. Можно вкладывать строки (row) в колонки (col).
2. По логике:

2.1. Шапка это логотип (col) и остальная часть (col), внутри которой строка (или две) с основной навигацией и контактами.
2.2. Основной контент сайта это тоже строка, внутри которой навигация (колонка), а рядом с ней содержимое страницы (тоже колонка), внутри которой строки с еще более вложенным содержимым.

Короче говоря, на буте такое можно собрать очень быстро.

Да, это расстояние между брейкпойнтами, дизайн для которого проектируется для минимального, а задаче верстальщик сделать его рабочим до следующего (большего).

Конечно, если есть нюансы (а они есть, к примеру на пересечении десктопа и таблетки (горизонтальный формат)) их тоже неплохо бы прорабатывать на уровне дизайна.

https://masonry.desandro.com/

В бутстрапе row это строка, задача которой → выстроить в линию по горизонтали элементы. Для корректной работы необходимо внутри нее использовать сетку col-[количество колонок, базово от 1 до 12].

Поэтому решения 2:
1. Убрать row из оберток, оставив только container*.
2. Вложить между контентом и row один див с классом col-12*.

* — и в любом случае поубирай отрицательные маржины. Они тебе тот еще подарок преподнесут ибо.

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

Bootstrap завязан на jQuery → а тот умеет делать так:

$(".clickelem").click(function (){
    $('html, body').animate({
        scrollTop: $("#tabname").offset().top
    }, 2000);
});

Лично мне больше импонирует VanillaJS, но она кушается не всеми браузерами:

window.scrollTo({
    top: [elem offset top],
    behavior: "smooth"
});

Первое, что следует взять во внимание, navbar яндекс это просто условно готовая база, которая подойдет для большинства решений, но в момент, когда ты упираешься в дизайн, то он [navbar] работать перестает. К слову, в последней версии вроде прямо готовый модуль убрали и заменили на компоновку.

Дальше, принять тот факт, что тебе придется описывать шапку на 90% самому.

Структурно же у тебя все вписывается в сетку и логику:
container-fluid
→container (верхняя часть шапки)
→container + отрицательный margin или transform для желтой навигации и к ней тебе с наибольшей вероятностью удобно будет использовать flex + justfy-content: space-between.

А про адаптивность говорить нельзя пока у тебя не руках нет макета для мобилок. Но как результат тебе все равно придется описывать самостоятельно, чтобы вписаться в дизайн. Либо по макету, либо брать на себя ответственность за мобильное решение.

PS: в идеале решение должно быть mobile-first (так проще).

Тебе необходимо вписать видео в область, а не, чтобы видео задавало свои параметры. Поможет тебе в этом object-fit(сразу обрати внимание на поддержку) или просто 100%-ная ширина видео.

И, парень, у тебя ни один блок не закончен. Мнения спрашивать стоит много позже и заранее готовится к тухлым помидорам.

SVG, как и изображение требует фиксированных размеров в соответствии со своими исходными параметрами, в img это размер кратинки, в SVG это вьюпорт канвы, на которой он был создан.

А потом этим размеры изменяются с помощью CSS, например max-width: 100%. Но так просто это сработает только с картинками, по идее с object тоже. Будет проще, если ты ресурс SVG вставишь в IMG, минус возможности, плюс к адаптации, как для новичка.

К слову, данный вопрос не имеет никакого отношения к Bootstrap-у.