Navbar上方的品牌Bootstrap 3

自从我从事过任何Web项目以来，这已经很长时间了，因为我从零开始构建了一些东西，所以我对CSS网格系统很陌生，比如Bootstrap中包含的一个3.我正在建立一个网站，可能最大的挑战就是学习如何考虑移动第一个网格系统。Navbar上方的品牌Bootstrap 3

我正在研究一个标题，其工作方式与New Yorker网页上的标题非常相似，或者将其描述为固定宽度，网站品牌（图片）的中心位置大于导航栏上方的大中设备。在下面的介质中，导航栏折叠并移动到与品牌相同的行（在最左侧），搜索图标移动到同一行的最右侧。所以可视化：

中型/大型设备：

BRANDING 
NAVBAR - SEARCH

小/特小设备：

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

感谢您对这些链接。基于你提到的推拉我发现这个网页：[https://scotch.io/tutorials/reorder-css-columns-using-bootstrap](https://scotch.io/tutorials/reorder-css-columns - 使用的自举）。我有一个后续问题。在我看到的每个示例中，随着屏幕变大，使用较少的列。所以我们可能在移动设备上有2个宽度为12的列，在大屏幕上缩小为2列6。有没有涉及到相反的技术。 I.E.随着宽度的减少占用较少的列？ – Uni

你应该从手机设计起来。所以从这个意义上说，你的品牌可能是2-8列（取决于你想要的），然后当你向上移动屏幕尺寸时，你会将品牌列顺序排在第一位，然后将它颠倒到12列其他2个元素随后变成“溢出”并溢出到新的一排。然后，您还可以增加溢流色尺寸，以占据品牌所在位置的空间。这是我将如何解决这个问题。当然，我还没有坐下来做这件事，并且可能会有像溢流等造型问题。 – CZorio

尽管由于它不能说足够，我推荐使用flexbox。它真的需要解决这些类型的问题。它也有一个“订单”属性。 – CZorio

Navbar上方的品牌Bootstrap 3

回答

相关问题