bootsrap的行中元素之间的均匀空间，左右对齐

Question

我想让这三个div占据父div的整个宽度，并且它们之间有均匀的间隔。我怎么做？就像下面的图片一样：

<div class="media-body">
    <h2 class="account-heading"> {{ userprofile.user.username }}</h2>
    <p class="text-secondary">{{ userprofile.bio|render_tags_and_links }}</p>
    <div class="row">
        <div class="col">
            <i class="fas fa-map-marker-alt icon-position"></i>
            <p class="text-secondary">{{ userprofile.city }}</p>
        </div>
        <div class="col">
            <i class="fas fa-link icon-position"></i>
            <p class="text-secondary">{{ userprofile.website|render_tags_and_links }}</p>
        </div>
        <div class="col">
            <div>
                <i class="fas fa-calendar-alt icon-position"></i>
                <p class="text-secondary ">{{ userprofile.user.date_joined|date:"F Y" }}</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            Posts: 0
        </div>
        <div class="col">
            Followers: 0
        </div>
        <div class="col">
            Following: 0
        </div>
    </div>
</div>

Answer 1

尝试此代码：