Bootstrap: несколько вопросов?

Question

[Роман —]

Здравствуйте!
Недавно начал изучать Bootstrap.
Знающие люди, подскажите:

1. Как верстать резиново в bootstrap'e? И нужно вообще? Или можно обойтись адаптивными блоками?
.conteiner-fluid → он растягиваться на всю ширину, а мне, например, нужно на 1220px → т.е просто прописать в width: 1220px / 1903px (получение процентного соотношения).
В общем, когда нужно использовать .container-fluid???

2. Запутался с mobile-first.
Как правильно задавать свойства на определенном разрешении экрана (media queries)???
Например, для 768px???
Так → @media (max-width: 768px) или @media (min-width: 768px)
Или как? Смещать на один пиксель?

3. Как подогнать дизайн под boostrap-сетку, если использовалась своя сustom-сетка???

4. Можно ли использовать Bootstrap 4 в продакшен?

5. Использовать flex grid? Или еще подождать? Есть ли какие-то нормальные fallback для flex???

6. Bootstrap 4 и SASS???

Спасибо!

Answer 1

[Максим Тимофеев]

1. Если нужно фиксировано, то не .conteiner-fluid а просто .conteiner
2. Зависит от того что Вам надо, выбрать экраны для которых 768 это максимум или наоборот
3. Сетку можно настроить под свой проект тут: getbootstrap.com/customize/#grid-system
4. Ходят разные мнения. Вопрос спорный, многое завит от ситуации. Мое мнение - не использовать продукты в альфа и бета версиях
5. Все ответы на вопросы "моги ли я это использовать" есть тут: caniuse.com/#search=flex
6. Bootstrap 4 и SASS!!!

Answer 2

[Илья]

1. .container {width:100%;max-width:1220px;} .container-fluid??? Забудьте про него. Приктически нигде не нужен.
2. Во-первых если max-width то 767px. Если min-width то 768px. min-width = движение вперед к увеличению размера, проще говоря, движение "от". max-width движение ширины "до". То есть, если вы пропишите max-width 767px, то у вас будут применяться все стили внутри этого медиа запроса для любой ширины экрана до 768px. min-width действует наоборот. min-width 768 px стили будет применяться для любой ширины экрана от 768 до бесконечности.
3.

<!-- bootstrap сетка -->
<div class="bootstrap-grid">
<div class="row">
    <div class="col-6">
        inner html    
    </div>
    <div class="col-6">
        inner html
    </div>
</div>
</div>

<!-- своя сетка -->
<div class="custom-grid">
    inner html
</div>

Что не так ??

4. Я использую с обязательным тестированием. Но чет они зависли с альфой очень надолго.
5. Используйте bootstrap 3 - без flex или 4 bootstrap - он полностью на флексбоксах.
6. Bootstrap 4 и SASS!!!