Bootstrap 自動網格行

Question

每個人。 我需要一個建議。 我是新手。 我有 li 元素。

<li class="list-group-item py-4 ">
    <div class="row">
        <div class="col-md-2">
            {{ form.about_yourself.label }}
        </div>
        <div class="col-md-8">
            <strong> {{ person.about_yourself }} </strong>
        </div>
            <div class="col-md-2">
            <a href="{% url 'get_phone' %}" type="button" class="btn btn-primary float-right btn-sm" > Change </a>
        </div>
    </div>
</li>

我有這個（圖片）在這里輸入圖像描述但是我希望行之間沒有空格。換句話說，我希望行具有自動大小，就像那樣。 在此處輸入圖片說明謝謝！

Answer 1

使用 col-md 和 col-md-auto 來適應寬度...

<li class="list-group-item py-4 ">
    <div class="row">
        <div class="col-md-auto"> about_yourself </div>
        <div class="col-md">
            <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra codeply varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt codeply</strong>
        </div>
        <div class="col-md-auto">
            <a href="#" type="button" class="btn btn-primary float-right btn-sm"> Change </a>
        </div>
    </div>
</li>

https://codeply.com/p/ZRAOBTGgNC