bootstrap 4 pull / float-right不适用于psd

Question

我有一个psd。我试图设计它。但是我没有成功。

我要按照bootstrap 4.3.1进行设计。

但是我看到了。

这是代码。

    <div class="col-md-3">
        <div class="card bg-success text-white pt-4 pb-4">
            <div class="justify-content-start float-right">
                <h3>140</h3>
                <p>Users</p>
            </div>
            <h1 class="float-left"><i class="fas fa-user"></i></h1>
        </div>
    </div>

Answer 1

这是一个简单的示例，虽然有多种方法可以完成相同的操作，但引导/字体在结构上却非常出色，您可能需要对示例进行调整，以加油。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>

<br/>

<div class="container-fluid border rounded w-50 shadow-sm">
  <div class="row">
    <div class="col-auto bg-success text-white d-flex align-items-center justify-content-center p-3 px-5 rounded-left">
      <i class="fas fa-user h1"></i>
    </div>
    <div class="col text-right p-2 pb-5 pr-3">
      Users<br/>
      <span class="font-weight-bold h5">123</span>
    </div>
  </div>
</div>