相同高度的自举列不会破坏布局

此问题是how can I make bootstrap columns all the same height的后续行动。基于一个建议solution我成立了一个js小提琴的例子来说明我的问题，http://jsfiddle.net/4d666/相同高度的自举列不会破坏布局

<div class="container"> 
    <div><h2 class="hero">a very long title</h2></div> 
    <div class="row"> 
     <div class="col-md-4" style="border: 1px solid black;"> 
     <p>test</p> 
      <p>test</p> 
      <p>test</p> 
      <p>test</p> 
     </div> 
     <div class="col-md-4" style="border: 1px solid black;"> 
      <p>foo</p> 
     </div> 
     <div class="col-md-4" style="border: 1px solid black;"> 
      <p>foo</p> 
     </div> 
    </div> 
    <div><h2 class="hero">a very long title</h2></div> 

    <div class="row"> 
     <div class="col-md-4" style="border: 1px solid black;"> 
      <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     </div> 
     <div class="col-md-4" style="border: 1px solid black;"> 
      <p>foo</p> 
     </div>  
    </div> 
</div>

而且从bootstrap 3 responsive columns of same height激发相应的CSS。

/* try to remove this css to see the effect */ 

.container{ 
    display:table; 
} 

.row { 
    display: table-row; 
} 

.row [class*="col-"] { 
    float: none; 
    display: table-cell; 
    vertical-align: top; 
}

小提琴中的html显示我的目标：我有一个标题和行的容器，并希望列的高度对齐。标题和行应该左对齐。当你运行小提琴没有的CSS，你会看到基本的想法（在这种情况下，列不会有相同的大小）。您可以调整结果面板的大小，以查看彼此之下的列是否折叠（当屏幕变得太小时，如预期的那样）。当你运行小提琴和这个CSS时，你会发现h2文本在每个单词之后都会断开，并且不再与列对齐。同时调整面板的大小使得列非常小，但不会再破坏它们。

我修改了小提琴，包括原来的答案，可以找到here。此次正确的h2 alignes，但第二行不与第一行对齐。同样，当您调整结果面板的大小时，列不会再崩溃。

是否有可能通过CSS来实现这一点？或者是JavaScript的唯一选择？

来源

2014-05-14 shaft

通过您的描述可以看出您想要达到的目标有点难。也许你可以包括某种形式的视觉引导我们？ – Dominic

Jan的答案解释了html标记中的一些缺陷。当我摆脱h2标题（或将它们移出容器）时，它的效果会更好（http://jsfiddle.net/4d666/3/）。我的目标是简单地使用高度相同的多个行，每行用一个标题分隔。剩下的问题是：为什么当我调整结果面板的大小时，瓷砖很小？ – shaft

shaft：这是因为你的瓷砖有一个可变的宽度（通过使用'.col-md-4'），它根据'@ media'屏幕尺寸进行调整。 – Jan

好的，我不确定我是否理解你想要达到的目标，但我可以告诉你为什么头条新闻表现得如此笨拙。您正在将您的.container定义为表格，您的.row的行为类似于表格行，而您的.col的行为类似于表格单元格。但是你把你的<h2>放在中间。所以，你basicially做的是这样的：

<table> 
    <h2>...</h2> 
    <tr> 
    <td>...</td> 
    </tr> 
</table>

浏览器根本不知道如何处理这一点，这就是为什么你的标题都表现在你的jsfiddle如此古怪。将<h2>放在.container之外，或放在另一个.col（放在.row之内）。

至于问题的其余部分，你能详细说一点吗？

来源

2014-05-15 11:36:54 Jan

我想在引导程序中创建多行，其中每行用标题分隔，并且行中的列具有相同的高度。 – shaft

如果我理解正确的话你的解释，我觉得这是你所需要的：

<div class="row"> 
    <div class="col-md-12"><h2>Heading Content</h2></div> 
    <div class="row"> 
     <div class="col-md-4 classToFixHeight">Column 1</div> 
     <div class="col-md-4 classToFixHeight">Column 2</div> 
     <div class="col-md-4 classToFixHeight">Column 3</div> 
    </div> 
</div>

这基本上是阐述什么一月已经回答了，但关于它更多的自举3，因为它是你使用的是什么。

现在来解释我的答案，为了让每行都由一个标题分隔，您需要指定您希望列到下一行，而不是与标题相同。您可以通过引导程序的.row轻松完成此操作。我甚至用.col-md-12来包装你的<h2>，强迫它占据整行。

来源

2014-05-16 05:52:18 Dominic

相同高度的自举列不会破坏布局

回答

相关问题