Выровненный справа столбец в Bootstrap с неупорядоченным списком без переноса текста

Question

Я не хочу, чтобы строки переполнялись до следующей строки. т.е. детали линии должны быть на одной линии. До сих пор я пробовал это. Но явно не правильно.

<div class="container">
<div class="row">
    <div class="col-12 text-right">
        <ul class="list-unstyled">
            <li>Address: DetailsDetailsDetailsDetailsDetailsDetailsDetails</li>
            <li>Telephone: DetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetails</li>
            <li>Fax: DetailsDetailsDetails</li>
            <li>Email: DetailsDetailsDetails</li>
        </ul>
    </div>
</div>

Вот кодовый слой, который я пробовал: https://www.codeply.com/go/3kyZUPbLoR

Answer 1

Как насчет использования <dl> с flexbox?

HTML

<div class="container">
    <div class="d-flex flex-row-reverse">
        <dl class="dl-horizontal">
            <dt>Address:</dt>
            <dd>Address here</dd>
            <dt>Telephone:</dt>
            <dd>123456</dd>
            <dt>Email:</dt>
            <dd>email@email.com</dd>
            <dt>Fax:</dt>
            <dd>123454</dd>
        </dl>   
    </div>
</div>

CSS

dl.dl-horizontal {
    display: flex;
    flex-wrap: wrap;
    font-size: 75%;
    flex: 0 1 40%;
}

dl.dl-horizontal dt,
dl.dl-horizontal dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-left: .25rem solid red;
}

dl.dl-horizontal dt {
    flex: 0 0 40%;
}

dl.dl-horizontal dd {
    flex: 0 0 60%;
    margin-bottom: 0;
}

Стили flex: 0 0 40% в DT и flex: 0 0 60% на дд предназначены главным образом для обеспечения одного дт и дд на строку.Они также предназначены для отображения многоточия при переполнении, так что нам хорошо.

Чтобы dl плавал вправо, вместо использования float:right;, я обертываю dl с flexbox и настройкой отображения его элементов в обратном порядке, flex-row-reverse.Последнее, что нужно сделать, это установить правильную ширину для dl .Вы можете использовать width:WHATEVER_WIDTH;, или то, что я использовал здесь: flex: 0 1 WHATEVER_PERCENTAGE%;.

https://jsfiddle.net/davidliang2008/qu1behny/32/

Answer 2

Используйте float-right и text-nowrap в элементах списка ...

<div class="container">
    <div class="row">
        <div class="col-12">
            <ul class="list-unstyled float-right">
                <li class="text-nowrap">Line1: DetailsDetailsDetailsDetailsDetailsDetailsDetails</li>
                <li class="text-nowrap">Line2: DetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetails</li>
                <li class="text-nowrap">Line3: DetailsDetailsDetails</li>
            </ul>
        </div>
    </div>
</div>

https://www.codeply.com/go/OZaLa2kP1L