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