Bootstrap网格中列行的垂直对齐 [英] Vertical alignment of column rows in Bootstrap grid

问题描述

假设您使用Twitter Bootstrap进行了两列布局，其中您希望特定的行彼此垂直对齐：

 < link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css  />< div class = container> < div class = row> < div class = col-sm-6> < h2>第1列/ h2 < p>可变高度的可选内容。 < p>< strong>垂直对齐...< / strong< / p> < / div> < div class = col-sm-6> < h2>第2< / h2> < p>< strong> ...使用此< / strong>< / p> < / div> < / div>< / div>  

垂直对齐方式为但是对于表格布局而言这是可行的，但是丢失了Bootstrap列的大小和响应行为：

 < link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css>< div class = container> ; < table class = row> < thead> < tr> < th scope = col>< h2>列1< / h2>< / th> < th scope = col>< h2>第2< / h2>< / th> < / tr> < / thead> < tbody> < tr> < td< p>可变高度的可选内容。 < / tr> < tr> < td>< strong>垂直对齐...< / strong>< / td> < td>< strong> ...使用此< / strong>< / td> < / tr> < / tbody> < / table>< / div>  

另一种选择是分割行，但是，在较小的分辨率下布局会以错误的顺序折叠。

 < link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css>< div class = container> < div class = row> < div class = col-sm-6> < h2>第1列/ h2 < / div> < div class = col-sm-6> < h2>第2< / h2> < / div> < / div> < div class = row> < div class = col-sm-6> < p>可变高度的可选内容。 < / div> < / div> < div class = row> < div class = col-sm-6> < strong>垂直对齐...< / strong> < / div> < div class = col-sm-6> < strong> ...与此< / strong> < / div> < / div>< / div>  

你如何获得相同的结果，同时仍然保持Bootstrap列的行为？使用表格布局是走的路还是死路一条？

编辑：我的目标是像上面那样对齐行的顶部。表布局。

解决方案

据我所知，我将测试这些解决方案。

解决方案1 ​​：使用Javascript（如果需要，可以使用Jquery）检测左右div的高度，并告诉它们具有相同的高度。

您可以在第二个内容div上应用此解决方案，以使粗体文本上方的espace具有相同的高度。

或者在比较两者的高度后，在较小的div中（例如，需要对齐的粗体文本）添加为例如边距顶部。 / p>

无论如何，如果您同时拥有这两个高度，则将有足够的信息来寻找方法。此处可能有多种解决方案，我让您根据自己的情况和需求找到更好的解决方案。

 < div class = container > 
< div class = row> 
< div class = col-sm-6 leftcolumn> 
< h2>第1< / h2> < / p>< / div> 
< div class = astallas< p>可变高度的可选内容。 
< p>< strong>垂直对齐...< / strong>< / p> 
< / div> 
< div class = col-sm-6 rightcolumn> 
< h2>第2< / h2> 
< div class = astallas>< / div> //使此空div具有与变量内容
< p>< strong> ...具有此< / strong>< / p>的左侧div相同的高度。 
< / div> 
< / div> 
< / div> 
  

解决方案2 （但某些浏览器不兼容）：使用Flexbox< 3是CSS3的本机功能，可让您轻松地确定所需的div位置。
http://flexboxfroggy.com/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我认为这两种方法都可以自举，并且会尊重响应性需求。

Suppose you have a two-column layout using Twitter Bootstrap, in which you want to have specific rows vertically aligned with each other:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Column 1</h2>
      <p>Optional content of variable height.</p>
      <p><strong>Align this vertically...</strong></p>
    </div>
    <div class="col-sm-6">
      <h2>Column 2</h2>
      <p><strong>...with this</strong></p>
    </div>
  </div>
</div>

Vertical alignment is feasible with table layouts, however, sizing and responsive behaviour of Bootstrap's columns is lost:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">

<div class="container">
  <table class="row">
    <thead>
      <tr>
        <th scope="col"><h2>Column 1</h2></th>
        <th scope="col"><h2>Column 2</h2></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><p>Optional content of variable height.</p></td>
      </tr>
      <tr>
        <td><strong>Align this vertically...</strong></td>
        <td><strong>...with this</strong></td>
      </tr>
    </tbody>
  </table>
</div>

Another option is to split rows, however, the layout folds in wrong order on smaller resolutions.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Column 1</h2>
    </div>
    <div class="col-sm-6">
      <h2>Column 2</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <p>Optional content of variable height.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <strong>Align this vertically...</strong>
    </div>
    <div class="col-sm-6">
      <strong>...with this</strong>
    </div>
  </div>
</div>

How do you achieve the same result while still maintaining the behaviour of Bootstrap's columns? Is using table layout the way to go or is it a dead-end? Is it otherwise possible without resorting to JavaScript to position a row to a computed offset?

EDIT: I aim to have the top of the rows aligned as is the case in the table layout.

解决方案

For what I know, I would test these solutions.

Solution 1 : Using Javascript (Jquery if you want) to detect the height of the left and the right div, and to tell them to have the same height.

You can apply this solution on the second content div to make the espace above your bold text having the same height.

Or to add.. for example as margin-top as needed in the smaller div (with bold text which need to be aligned) after comparing the heights of both.

Anyway, if you have both of theirs heights you will have enought informations to find a way. Multiples solutions are possible here, I let you find the better one for your context and needs.

<div class="container">
  <div class="row">
    <div class="col-sm-6 leftcolumn">
      <h2>Column 1</h2>
      <div class="astallas"><p>Optional content of variable height.</p></div>
      <p><strong>Align this vertically...</strong></p>
    </div>
    <div class="col-sm-6 rightcolumn">
      <h2>Column 2</h2>
      <div class="astallas"></div> // make this empty div have the same height that the left one with variable content
      <p><strong>...with this</strong></p>
    </div>
  </div>
</div>

Solution 2 (but with some browsers incompatibilties) : Use Flexbox <3 which is a native CSS3 fonctionnaly that give you a easy way to have your wanted divs' positions. http://flexboxfroggy.com/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I think that both of these works with bootstrap and will respect responsive needs.

这篇关于Bootstrap网格中列行的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！