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

注意：我无权访问图标/图像。

如何使用Bootstrap 4设计样本psd

1 个答案: