Bootstrap 3 1.5列偏移

本文介绍了Bootstrap 3 1.5列偏移的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试提出Bootstrap 3网格布局，其中第一行具有4列，而底部具有3列，相对于第一列居中，如此...

I am trying to come up with a Bootstrap 3 grid layout where the top row has 4 columns and the bottom has 3 columns centered against the first like so...

我看过使用偏移量，但是因为它们的底行需要使用1.5列的左偏移量，所以它不起作用.

I have looked at using offset but because they bottom row would need to use a left offset of 1.5 columns it isn't working.

有人能看到类似的工作示例吗?

Has anyone got a similar working example I can look at?

推荐答案

我为这样的组织结构图做了类似的事情:

I made something similar for an org-chart like this:

HTML

<div class="container"> <div class="row"> <div class="col-md-3 box"> Column </div> <div class="col-md-3 box"> Column </div> <div class="col-md-3 box"> Column </div> <div class="col-md-3 box"> Column </div> </div> <div class="row center-boxes"> <div class="col-md-3 col-md-push-1 box"> Column </div> <div class="col-md-3 col-md-push-1 box"> Column </div> <div class="col-md-3 col-md-push-1 box"> Column </div> </div> </div>

CSS

.container{ background:#ccc; } .box{ background: gray; height:50px; text-align:center; padding:15px; border:1px solid black; } .center-boxes div{ margin:0 -4% 0 4%; }

*这仅满足桌面视图，相应地针对较小的设备进行调整，直到最终得到 col-xs-12 为止，此时偏移(推动)将无关紧要

*This only satisfies the desktop view, adjust accordingly to smaller devices until you end up with col-xs-12 which at that point the offset (push) won't matter

需要一些@media查询调整，分辨率为1024px和991px，并且 margin:0 -4％0 4％;

And some @media query adjustments will be needed at 1024px and 991px with the margin:0 -4% 0 4%;

请参见工作演示 此处

See the working demo here