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>

我有这个（图片）enter image description here但是我想在行之间没有空格，换句话说，我想行具有自动大小，就像这样。enter image description here谢谢！

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