如何使用 bootstrap 4 设计样本 psd

Question

我想设计一样的psd

<div class="col-md-6 align-self-center" style="font-size: 70%">
    <div class="card-body">
        <div class="d-inline-flex align-items-center">
            <div class="row">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-map-marker-alt"></i></h4>
                <p class="col-sm-11">Address
                    <br>1600 Pennsylvania Ave NW, Washington, DC 20500
                </p>
            </div>
            <div class="row">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-phone"></i></h4>
                <p class="col-sm-11">Telephone
                    <br>8888888888
                </p>
            </div>
            <div class="row">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-envelope"></i></h4>
                <p class="col-sm-11">Email
                    <br>site@gmail.com
                </p>
            </div>
            <div class="row">
                <div class="mr-5 h4">
                    <div class="d-inline">
                        <i class="fab fa-bluetooth-b"></i>
                        <i class="fab fa-instagram"></i>
                        <i class="fab fa-facebook"></i>
                        <i class="fab fa-google-plus"></i>
                        <i class="fab fa-twitter"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

但我看到了这个演示。

justify-content-center 将表格水平对齐，但我不知道如何垂直对齐。我尝试过使用 align-items-center 和 align-self-center，但它不起作用。

我错过了什么？

Answer 1

您可以使用它开始：

<div class="col-md-6 align-self-center" style="font-size: 70%">
    <div class="card-body">
        <div>
            <div class="row">
              <div class="col-sm-11">
                <p class="right">Address
                    <br>1600 Pennsylvania Ave NW, Washington, DC 20500
                </p>
              </div>
              <div class="col-sm-1">
                <h4><i class="fas fa-map-marker-alt"></i></h4>
              </div>
            </div>
            <div class="row">
                <div class="col-sm-11">
                <p class="right">Telephone
                    <br>8888888888
                </p>
              </div>
              <div class="col-sm-1">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-phone"></i></h4>
              </div>
            </div>
            <div class="row">
                <div class="col-sm-11">
                <p class="right">Email
                    <br>site@gmail.com
                </p>
              </div>
              <div class="col-sm-1">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-envelope"></i></h4>
              </div>


            </div>
            <div class="row">
                <div class="right absolute">
                  <div class="mr-5 h4">
                      <div class="d-inline">
                          <i class="fab fa-bluetooth-b"></i>
                          <i class="fab fa-instagram"></i>
                          <i class="fab fa-facebook"></i>
                          <i class="fab fa-google-plus"></i>
                          <i class="fab fa-twitter"></i>
                      </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

我添加了一些 CSS 以使文本从右到左：

.right {
  text-align: right;
  right: 0;
}

.absolute {
  position: absolute;
}

这是一个使用您的代码的 Codepen：https://codepen.io/brooksrelyt/pen/omLevx

注意：我无权访问 icons/images。

如何使用 bootstrap 4 设计样本 psd

how to design sample psd with bootstrap 4

psd

bootstrap-4