Регулировка высоты текстовой строки в HTML / CSS

Question

Я создаю очень простой интерфейс оформления заказа с bootstrap. Вот что у меня получилось:

                    <ul class="list-group list-group-flush">
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                    </ul>

Как мне приблизить строки «Название продукта»? Там нет верхнего или нижнего поля / отступов ... поэтому я не слишком уверен, как этого добиться.

Любая помощь будет высоко ценится!

Answer 1

Bootstrap установить элемент body с помощью line-height: 24px;, а элемент .row наследует его ... Вам следует установить line-height элемента .row внутри вашей группы списков ...

.list-group-item .row {
    line-height: 10px;
}

li.list-group-item .row {
    line-height: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <ul class="list-group list-group-flush">
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                    </ul>