自从我从事任何Web项目以来已经很长时间了，甚至从头开始构建东西都已经很长时间了，所以我对CSS网格系统（例如Bootstrap 3中所包含的系统）非常陌生。我正在构建一个网站挑战的最大部分也许就是学会根据移动优先网格系统进行思考。
我正在研究一种标题，其工作方式与《纽约客》网络杂志上的标题大致相同，或者描述性地将其固定宽度固定，并在中型和大型设备的导航栏上方居中放置一个网站品牌（图片）。在中号下方，导航栏折叠并移动到与品牌标记相同的行（在最左边），搜索图标移动到同一行的最右边。因此可视化：
中/大型设备：
BRANDING
NAVBAR - SEARCH
小型/超小型设备：
NAVBAR(COLLAPSED) - BRANDING - SEARCH
我对牵扯到代码所在的地方并不是很感兴趣，而是描述了如何使用B3网格系统来实现。
预先感谢您的帮助。
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/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句