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