Bootstrap 上的右对齐列，带有无环绕文本的无序列表答案

【问题标题】：Right aligned column on Bootstrap with an unordered list with no wrapping textBootstrap 上的右对齐列，带有无环绕文本的无序列表
【发布时间】：2019-08-06 18:44:53
【问题描述】：

我不希望这些行溢出到下一行。即行的详细信息应该在同一行。到目前为止，我已经尝试过了。但显然不正确。

<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

【问题讨论】：

现在行详细信息显示在单独的行中，对吗？
如果行长于其父容器，您希望得到什么结果？

标签： html twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案1】：

在列表项上使用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

【讨论】：

【解决方案2】：

将<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;
}

dt上的flex: 0 0 40%和dd上的flex: 0 0 60%样式主要是为了保证dt和dd 每行。它们的样式还可以在溢出时显示省略号，所以我们很好。

为了使 dl 向右浮动，而不是使用 float:right;，我将 dl 包裹在一个 flexbox 中并设置为以相反的顺序显示其项目，@987654332 @。最后要做的是为 dl 设置适当的宽度。你可以使用width:WHATEVER_WIDTH;，或者我这里使用的：flex: 0 1 WHATEVER_PERCENTAGE%;。

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

【讨论】：

感谢您的详细解答。但我选择了早期的答案，因为它不需要自定义样式，侵入性较小。