html - 导航栏 Bootstrap 3 上方的品牌

Question

自从我从事任何 Web 元素以来已经有很长一段时间了，自从我从头开始构建一些东西以来甚至更长，所以我对 CSS 网格系统非常陌生，例如 Bootstrap 3 中包含的系统。我是建立一个网站，也许最大的挑战是学习从移动优先网格系统的 Angular 思考问题。

我正在开发一个标题，其工作方式与 New Yorker 上的标题大致相同网络杂志或描述性地说它是固定宽度的，在中型和大型设备上有一个以导航栏为中心的网站品牌(图像)。在中下方，导航栏折叠并移动到与品牌相同的行(在最左侧)，搜索图标移动到同一行的最右侧。所以可视化:

中/大型设备:

    BRANDING
NAVBAR - SEARCH

小型/超小型设备:

NAVBAR(COLLAPSED) - BRANDING - SEARCH

我对在涉及代码的地方手持我的手不太感兴趣，但对如何使用 B3 网格系统实现这一点的描述很感兴趣。

预先感谢您的帮助。

Answer 1

Flexbox 将是你最好的 friend 。

但是，对于 Bootsrap，您可以使用 .col-md-push-* 和 .col-md-pull-* 等类对列重新排序，分别将列向右或向左移动。这将与您的媒体查询相关(将品牌列拉到中间)以实现您正在寻找的内容:)

对于 Flexbox 的介绍，我推荐:

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

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

要全面了解 Bootstrap 网格系统，请查看: http://www.sitepoint.com/understanding-bootstrap-grid-system/