css - 引导下拉菜单不使用可用空间并在向右拉时中断

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>

宽度 react 正常，但我没有正确调整日期。

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>