bootstrap：响应span12中的四个span3缩略图

我们在span8 -container中堆积了一个span12 - 并尝试将四个缩略图放在一行中。可惜的是最后的<li>打破了下一行，虽然屏幕尺寸可以让所有四个缩略图合适连续。bootstrap：响应span12中的四个span3缩略图

与像6X span2其他组合同样的行为......

我建立一个小型的小提琴显示此行为： http://jsfiddle.net/PnWjT/

任何建议如何解决这一问题？

来源

2012-02-21 Seybsen

布局的问题在于你不适当地堆叠引导类，这就是为什么你的布局不能按照你想要的方式行事。

借此例如：

<div class="container"> 
    <div class="container-fluid"> .. </div> 
</div>

在这里，你正试图以层叠流体div容器，.container-fluid，一个固定的容器专区内，.container，从而抵消.container-fluid股利。这两个遏制div旨在用于封装你想要的布局，而不是彼此堆叠，所以只能使用一个。

另一个问题与堆栈如下：

<div class="span8"> 
    <div class="row-fluid"> 
     <div class="span12"> 
      <div class="row-fluid"> 
       ......

在这里，你是一个span8专区内格（在.row-fluid容器内宽度100％）堆叠span12 DIV（内.row-fluid宽度65.812％），因此您的内容被推向右侧，因为您的span12 div溢出了较小的容器span8 div，并且由于它不适当调整以调整更改大小。您应该将span div相应地叠放到它们的宽度上，例如， span12/2 = span6, span4*2 = span8, span5 + span5 = span10等...

这是一个demo与正确的堆栈返工。请注意，除非您创建自己的课程，否则边栏上的span4 div以及span8,span4 + span8 = span12上的内容不能超过span12。

来源

2012-02-22 03:32:16

_Nesting流体网格有点不同：嵌套列的数量不需要匹配父。相反，您的列在每个级别重置，因为每行占用父列的100％._它在[bootstrap-docs]（http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem）或者我在这里错过了什么？ – Seybsen 2012-02-22 07:31:28

@Seybsen列在每个级别重置，这意味着一旦你开始调整你的浏览器的大小，每行开始占用父宽度的100％，但是当浏览器是全屏时，它们仍然容易受到父母宽度的影响。这就是让他们“流畅”的原因。 – 2012-02-22 10:55:23

@AndresIlich我从中得到的是，在流畅的布局中，每个级别需要加起来12个。这是正确的吗？ – JonWells 2012-10-01 11:37:07

bootstrap：响应span12中的四个span3缩略图

回答

相关问题