Bootstrap 自动网格行答案

【问题标题】：Bootstrap auto grid rowBootstrap 自动网格行
【发布时间】：2020-07-04 05:29:03
【问题描述】：

每个人。我需要一个建议。我是新来的。我有 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 谢谢！

【问题讨论】：

标签： html css bootstrap-4 grid html-lists

【解决方案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

【讨论】：