Брендинг над navbar Bootstrap 3

Прошло много времени с тех пор, как я работал над любыми веб-проектами и даже дольше, так как я создал что-то с нуля, поэтому я очень новичок в сетчатых сетях CSS, таких как тот, который включен в Bootstrap 3. Я строю веб-сайт, и, возможно, самая большая часть проблемы - это научиться думать в терминах мобильной первой сетки.Брендинг над navbar Bootstrap 3

Я работаю над заголовком, который работает во многом так же, как и заголовок на веб-сайте New Yorker, или, чтобы его описать, он имеет фиксированную ширину, имеет брендинг сайта (изображение), центрированный над навигационной панелью на среднем и большом устройства. Ниже среды navbar рушится и перемещается в ту же строку, что и брендинг (слева), а значок поиска перемещается в крайнее правое в той же строке. Так визуализируют:

Среднее/Devices:

BRANDING 
NAVBAR - SEARCH

Small/Extra Small Devices:

NAVBAR(COLLAPSED) - BRANDING - SEARCH

Я не столько заинтересован в том, моя рука держала где код обеспокоен , а описание того, как это может быть достигнуто с использованием сетки B3.

Заранее благодарю вас за помощь.

источник

2016-05-14 Uni

Flexbox будет вашим лучшим другом для этого.

Однако для Bootsrap вы можете упорядочить столбцы, используя классы, такие как .col-md-push- * и .col-md-pull- *, чтобы сдвинуть столбец вправо или влево соответственно. Это станет актуальным в ваших медиа-запросов (тянущих колонки марки в середине), чтобы добиться того, что вы ищете :)

Для интро Flexbox я рекомендую:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://flexbox.io/view/qWL-7ih9Kw0

за большой обзор начальной загрузки системы сетки проверить это: http://www.sitepoint.com/understanding-bootstrap-grid-system/

источник

2016-05-14 17:29:28 CZorio

Спасибо за эти ссылки. Основываясь на вашем упоминании о push и pull, я нашел эту страницу: [https://scotch.io/tutorials/reorder-css-columns-using-bootstrap](https://scotch.io/tutorials/reorder-css-columns -Использование-самозагрузка). У меня есть следующий вопрос. В каждом примере, который я видел, когда на экране появляются более крупные элементы, используйте меньше столбцов. Таким образом, у нас может быть 2 столбца с шириной 12 на мобильном телефоне, что уменьшает до 2 столбцов 6 на больших экранах. Есть ли какие-либо технические проблемы в обратном направлении. И.Е. занимая меньше столбцов по мере уменьшения ширины? – Uni

Вы должны проектировать из мобильного Up. Таким образом, в этом смысле ваш бренд может составлять 2-8 столбцов (в зависимости от того, что вы хотите), а затем, когда вы продвигаетесь по размеру экрана, вы делаете порядок столбцов бренда первым, а затем подбрасываете его до 12 столбцов, поэтому что другие 2 элемента затем становятся «переполнены» и разливаются в новую строку. Затем вы также увеличили бы размер переполнения cols, чтобы заняться отсутствием места, где был бренд. Вот как я подхожу к этой проблеме. Конечно, я не сел, чтобы сделать это, и могут быть такие вещи, как проблемы с дизайном с переполнениями и т. Д. – CZorio

Хотя, поскольку это невозможно сказать достаточно, я рекомендую использовать flexbox. Это действительно снимает головную боль из этих вещей. Он также имеет свойство «порядок». – CZorio

Брендинг над navbar Bootstrap 3

ответ

Смежные вопросы