Bootstrap 3 1.5列偏移 [英] Bootstrap 3 1.5 column offset

问题描述

我正在尝试提出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

这篇关于Bootstrap 3 1.5列偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！