1. 首页
  2. 问答
  3. 如何将4个盒子与自举网格系统对齐？

如何将4个盒子与自举网格系统对齐？

2016-09-01 58 views
0

我想对齐使用Bootstrap网格系统的一些容器。最终结果应该如下图所示。 enter image description here如何将4个盒子与自举网格系统对齐？

但我得到的结果如下。

enter image description here

代码：

<div class="row"> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-6"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
</div>

我问这个问题，主要是因为如果我颠倒的div我会得到预期的结果。

enter image description here

代码：

<div class="row"> 
    <div class="img col-xs-12 col-sm-12 col-md-6"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
</div>

这可能有助于让你知道，我试图重新创建图像布局从：https://founderspledge.com/

来源

2016-09-01 Geoffrey-ap

+0

他们用他们的设计绝对位置。我认为它被称为石工。我不认为你可以通过浮动来实现它。 –

+0

@HermLuna，我注意到，当我回顾源代码，但我找不到位置绝对规范的css/js文件。 –

+0

我认为在YouTube上有一个叫做使用javascript的多列布局的教程。这就是你需要的。 –

回答

0

我试图玩弄创建该布局，并拿出这个：

<div class="container-fluid"> 

    <div class="row"> 
    <div class="lg col-md-6"> 
     <div class="sm col-md-6"> 
     small 
     </div> 
     <div class="sm col-md-6"> 
     small 
     </div> 
    </div> 
    <div class="lg col-md-6"> 
     large 
    </div> 
    </div> 

    <div class="row"> 
    <div class="lg col-md-6"> 
     large 
    </div> 
    <div class="lg col-md-6"> 
     <div class="sm col-md-6"> 
     small 
     </div> 
     <div class="sm col-md-6"> 
     small 
     </div> 
    </div> 
    </div> 

</div>

下面是一个例子的链接：

http://codepen.io/minipunch/pen/zKYOxO

或者让我知道，如果是帮助，如果您有任何问题！

来源

2016-09-01 02:23:37

0

您可以使用此布局：

<div class="row"> 
    <div class="col-md-6"> 
    <div class="img col-xs-12 col-sm-12 col-md-6">1</div> 
    <div class="img col-xs-12 col-sm-12 col-md-6">2</div> 
    <div class="img col-xs-12 col-sm-12 col-md-6">3</div> 
    <div class="img col-xs-12 col-sm-12 col-md-6">4</div> 
    </div> 
    <div class="col-md-6"> 
    <div class="img col-xs-12 col-sm-12 col-md-12">5</div> 
    </div> 
</div>

这里是一个工作的jsfiddle： https://jsfiddle.net/2kdd51kw/

来源

2016-09-01 02:38:12 Dekel

0

我会做这样的事情， 这里是codepen.io链接：http://codepen.io/anon/pen/KgKKdd

<div class="row"> 
    <div class="col-md-6"> 
    <div class="row"> 
     <div class="col-md-6 small-box">1</div> 
     <div class="col-md-6 small-box">2</div> 
     <div class="col-md-6 small-box">3</div> 
     <div class="col-md-6 small-box">4</div> 
    </div> 
    </div> 
    <div class="col-md-6 box">big content</div> 
</div>

来源

2016-09-01 04:53:28 bis

0

这是因为Bootstrap float:left。最简单的方法是在版面上使用pull-right（col-md-6），其中包含右侧较大的图像。

<div class="row"> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-6 pull-right"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
    <div class="img col-xs-12 col-sm-12 col-md-3"></div> 
</div>

http://www.codeply.com/go/g36R42L3Pc

来源

2016-09-01 21:00:06 ZimSystem

相关问题

 相关问题