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类中有多少是标准引导程序，但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

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

<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下拉菜单没有使用可用空间并且在右拉中断

2 个答案: