bootstrap 下拉菜单不使用可用 space 并在向右拉时中断

Question

我的下拉菜单如下所示：

<a uib-dropdown-toggle class="tm-notification" href="">
    <i class="tmn-counts" id="idItemNumber">666</i>
</a>
<div class="dropdown-menu pull-right dropdown-menu-lg">
    <div class="listview">
        <div class="lv-header">
            A title here
        </div>
        <div class="lv-body c-overflow">
            <div class="lv-item">
                <div class="lv-title">
                    <div class="pull-left">Some very long text here</div>
                    <div class="pull-right">01-06-2016</div>
                </div>
            </div> 
        </div>
    </div>
</div>

这导致 pull-right div 跳到下一行。

我不确定 css 类中有多少是标准的 bootstrap，但是 dropdown-menu div 的 css 有：

min-width: 300px;

如果我添加 width: 345px; 结果是正确的，但它不再是动态的。所以我希望下拉菜单的宽度取决于它的内容。

我试图将所有数据都集中在 1 个左拉 div

<div class="pull-left">Some very very long text here 01-01-2016</div>

宽度反应正常，但我没有把日期拉对。

Answer 1

试试这个

<a uib-dropdown-toggle class="tm-notification" href="">
    <i class="tmn-counts" id="idItemNumber">666</i>
</a>
<div class="dropdown-menu pull-right dropdown-menu-lg">
    <div class="listview">
        <div class="lv-header">
            A title here
        </div>
        <div class="lv-body c-overflow">
            <div class="lv-item">
                <div class="lv-title">
                    <div class="pull-left col-sm-7">Some very long text here</div>
                    <div class="pull-right col-sm-5">01-06-2016</div>
<div class="clearfix"></div>
                </div>
            </div> 
        </div>
    </div>
</div>

Answer 2

非常简单地使用日期标签并为其提供拉权 class。

<div class="lv-body c-overflow">
            <div class="lv-item">
                <div class="lv-title">
                    <div class="col-sm-12">Some very long text here <label class="pull-right">01- 06-2016</label></div>

<div class="clearfix"></div>
                </div>
            </div> 
        </div>

bootstrap 下拉菜单不使用可用 space 并在向右拉时中断

bootstrap dropdown menu doesn't use available space and breaks on pull-right

css

angular-ui-bootstrap

twitter-bootstrap-3