Элемент неверно изменяет свою ширину

Question

Элемент неверно изменяет свою ширину

Рейтинг: 0Ответов: 0Опубликовано: 30.06.2023

Я бы хотел создать карточку (используя Bootstrap) с такими правилами:

карточка имеет минимальную ширину 250px (карточка #1 - корректно отображается)
если первая строка длиннее 250px, то карточка должна увеличить свою ширину, строка не должна оборачиваться (карточка #2 - ширина недостаточно увеличивается, строка оборачивается)
если левая и правая часть второй строки длиннее 250px, то карточка должна увеличить свою ширину, строки не должна оборачиваться (карточка #3 - ширина не увеличивается, строки оборачивается)
третья строка всегда оборачивается и не должна увеличивать ширину карточки (карточка #4 - ширина увеличивается)

На экране смартфона карточки так же отображаются некорректно.

Почему мой код не работает корректно?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="d-flex">
    <div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
        <div class="">#1 Short string</div>
        <div class="d-flex justify-content-between"><div>Left</div><div>Right</div></div>
        <div class="text-wrap">Short wrapped string</div>
    </div>
    <div class="w-100">
    </div>
</div>

<div class="d-flex">
    <div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
        <div class="">#2 Very very very very very very very very long string</div>
        <div class="d-flex justify-content-between"><div>Left</div><div>Right</div></div>
        <div class="text-wrap">Short wrapped string</div>
    </div>
    <div class="w-100">
    </div>
</div>

<div class="d-flex">
    <div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
        <div class="">#3 Short string</div>
        <div class="d-flex justify-content-between"><div>Left left left left</div><div>Right right right right</div></div>
        <div class="text-wrap">Short wrapped string</div>
    </div>
    <div class="w-100">
    </div>
</div>

<div class="d-flex">
    <div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
        <div class="">#4 Short string</div>
        <div class="d-flex justify-content-between"><div>Left</div><div>Right</div></div>
        <div class="text-wrap">Very very very very very very very very very very very very very very long wrapped string</div>
    </div>
    <div class="w-100">
    </div>
</div>

css html bootstrap

Источник: Stack Overflow на русском

Элемент неверно изменяет свою ширину

Ответы