gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:26:38 25 4
gpt4 key购买 nike

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

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

中/大型设备:

    BRANDING
NAVBAR - SEARCH

小型/超小型设备:

NAVBAR(COLLAPSED) - BRANDING - SEARCH

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

预先感谢您的帮助。

最佳答案

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/

关于html - 导航栏 Bootstrap 3 上方的品牌,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37228918/

25 4 0