html - 在 Bootstrap 中将图标推到文本的右侧

Question

使用 Bootstrap 3.3.7，我尝试创建一个具有以下内容和特征的双列行:

• 包含文本的左列 (col-sm-9)
• 右列 (col-sm-3) 包含一个水平和垂直居中的图像
• 这两个 div 之间的非全高垂直分隔线

我无法让整行以至少 980 像素显示并创建了一个 fiddle here :

最初，右侧的 image div 容器仅与图像本身一样高，因此我添加了以下代码以强制设置相同的高度，但这导致了 width 减少到每个 div 中内容的 大小:

[class*="ccol-"] {
float: none;
display: table-cell;
vertical-align: middle;
}

我想知道其他 Bootstrapper 如何编写一个简单的行，左侧是文本，垂直分隔线，右侧是图像。

Answer 1

我建议 flexbox 垂直居中。

@media (min-width: 768px) {
  .previewWrapper .row {
    display: flex;
  }
  .previewWrapper .row > * {
    flex-grow: 1;
    display: flex;
    flex-direction:column;
    justify-content: center;
  }
}

Updated snippet .别忘了 autoprefix .请注意，我按照您的要求完成了 9-3。如果你想保留它 10-2，here it is .