相关疑难解决方法(0)

在某些浏览器中,例如Safari 9,以下引导网格在row元素的任一侧留下1px间隙.这是为什么？

.a {background-color:#eee}
.b {background-color:#ddd}
.row {background-color:red}

.vertical-align {
   display: flex;
   align-items: center;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-6 a">Hello</div>
        <div class="col-xs-6 b">World</div>
    </div>
</div>
<br><br>
<div class="container">
    <div class="row vertical-align">
        <div class="col-xs-6 a">Hello</div>
        <div class="col-xs-6 b">World</div>
    </div>
</div>

我对 Bootstrap 很陌生，我grid在尝试重现以下模板时遇到了系统问题：

在这个例子中，我有 3 列：

1. 第一列包含一些信息/图片。该列包含大量数据。
2. 第二列包含 3 个（但可能是 n 个）联系信息（电子邮件、地址、电话号码等）
3. 第三列包含一些随机信息

我想将第二列分成 3 行，高度相等。我需要做的是将这 3 行垂直居中在第二列，并可能扩展它们的高度以填充父（第二列）高度。

这是我迄今为止取得的成就的一个例子：

<div class="row container">
  <div class="col-md-4 first">
    <p> ... VERY LONG CONTENT ... </p></div>
  <div class="col-md-4 second">
    <div class="row">
      Telephone number
    </div>
    <div class="row">
      Address
    </div>
    <div class="row">
      email
    </div>
  </div>
  <div class="col-md-4 third">
    Something else, vertically centered
  </div>
</div>

在这里找到一个带有我的代码的引导

作为替代方案，我也很乐意使用<ul>.

我怎样才能做到这一点？是否有任何引导类可以应用于所有 3 行，以使它们完全填充父高度？

先感谢您