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

这里有一个简单的例子，在结构上只有bootstrap / font很棒尽管有多种方法可以完成同样的事情，你可能需要根据你的用法来调整这个例子，干杯。

​

<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>

​