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

Question

使用 Bootstrap 3.3.7 ，我正在尝试创建一个具有以下内容和特征的two-column行：

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

我无法以最小980像素显示整行，并创建了一个小提琴here：

最初，右侧的image div容器只与图像本身一样高，所以我添加了以下代码以强制相同的高度，但这导致width缩小为{ {1}}每个div中的内容：

size

我想知道其他Bootstrappers如何编写左边带有文本的简单行，一个垂直分隔符和一个右边的图像。

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。

Answer 2

您是否尝试过使用min-width attribute？例如，您可以通过向相关容器添加"min-width: 980px;"来强制容器达到一定大小或更大。