html - 如何使用 bootstrap 3 在面板中垂直对齐文本

Question

我有一个图片和一个panel panel-default的描述。图片拉到左边，说明在右边。

图像具有 img-responsive 类，因此当我调整窗口大小时它适合面板主体。

问题是我怎样才能达到与描述相同的效果。我想将它垂直对齐到面板，当我调整窗口大小时它也应该适合面板主体。

到目前为止我尝试了什么:

.container {
  padding-top: 30px;
}

p {
  font-size: 2vw;
}

.panel {
  border-radius: 0;
}

.panel-body {
  padding: 0;
}

.panel-description {
  margin-top 12px;
  padding-left: 3px;
}

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

.no-padding {
  padding: 0;
}

.no-padding-right {
  padding-right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-4 col-md-4 no-padding-right">
              <div class="panel-image">
                <img src="http://via.placeholder.com/150x150" class="img-responsive" alt="img">
              </div>
            </div>
            <div class="col-sm-8 col-md-8 no-padding">
              <div class="panel-description vertical-center">
                <p>Name<br>Surname</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
  </div>
</div>

我加了

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

到 .panel-description 但它不起作用。

这个问题的最佳解决方案是什么？

https://jsfiddle.net/DTcHh/39282/

Answer 1

我对您的代码几乎没有改动，现在运行良好。这是更新后的代码供您引用

.container {
  padding-top: 30px;
}

p {
  font-size: 2vw;
}

.panel {
  border-radius: 0;
}

.panel-body {
  padding: 0;
}

.panel-description {
  margin-top 12px;
  padding-left: 3px;
}

.no-padding-right {
  padding-right: 0;
}

.main-class {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
}

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="main-class">
                <div class="col-sm-4 col-md-4 no-padding-right">
                  <div class="panel-image">
                    <img src="http://via.placeholder.com/150x150" class="img-responsive" alt="img">
                  </div>
                </div>
                <div class="col-sm-8 col-md-8 no-padding">
                  <div class="panel-description vertical-center">
                    <p>Name<br>Surname</p>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
  </div>
</div>