Question

我尝试在每个项目的下拉菜单的右侧设置一个小标题，与项目文本垂直对齐。在示例中，标题/子文本是数字。

123和12345浮动到各自行的顶部。 1234567已不合需要地包裹到新行

我能够使用一个简单的非引导版本，但引入Bootstrap会导致问题。我还没有将代码输入到jsfiddle或SO提供的Web代码实用程序中，因为它们似乎拉伸了示例宽度以填充掩盖问题的窗口。这是代码：

https://github.com/keithellis/MaterialWidget

Answer 1

如果你需要使用Bootstrap，那么最好使用Bootstrap工件（CSS和组件），而不是用你自己的布局来对抗它。然后在Bootstrap的顶部自定义您的样式。那么维护代码会更容易。

为了做您想做的事，最简单的解决方案就是将您的下拉列表视为 list-group 。将list-group课程添加到dropdown-menu，并将其设为div，而不是ul。然后，只需在a上标记list-group-item类和pull-right来标记数字。

在下面的示例中，只需拖动拆分器即可增大/减小结果窗格的大小，以查看其在所有媒体查询宽度中的行为方式。对于示例代码段，只需全屏查看。

示例小提琴：http://jsfiddle.net/abhitalks/1o5o29jy/

<强> 段：

＆＃13;

.dropdown-menu { padding: 0px; }
.dropdown-menu, .list-group { border-width: 0px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                    Dropdown <span class="caret"></span>
                </a>
                <div class="dropdown-menu list-group">
                    <a class="list-group-item" href="#">
                        <span class="pull-right">123</span>
                        <span>Caption</span>
                    </a>
                    <a class="list-group-item" href="#">
                        <span class="pull-right">12345</span>
                        <span>Description</span>
                    </a>
                    <a class="list-group-item" href="#">
                        <span class="pull-right">99</span>
                        <span>Very long description</span>
                    </a>
                </div>
            </li>
        </ul>
    </div>
</nav>

＆＃13;

Answer 2

看起来这里看到的问题是因为它没有更多空间可以在同一行中呈现。

有两种方法可以为此获得解决方案。

选项1＃ 为.navbar-nav类添加额外的宽度以合并额外的文本。但由于你需要它是动态的，我建议你尝试选项2中显示的以下技巧。

选项2＃ 在.name课程中添加相同的文字，然后制作opacity:0;。并且，不是为.ih类正确浮动，而是在其上执行position: absolute; right: 0; top:6px;并添加以下css。

下面是代码的样子。

＆＃13;

.dropdown-menu li a {
    position:relative;
}
.ih {
    font-size: 85%;
    position: absolute;
    right: 0;
    top:6px;
}
.ih-dummy { /* this is a new class */
    margin-left:15px;
    font-size: 85%;
    opacity:0;    
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav trial">
    <li class="dropdown open">
        <ul class="dropdown-menu" id="a">
            <li> <a href="#">
            <div class="name">blah blah<span class="ih-dummy">123</span></div>
            <div class="ih">123</div>
          </a>

            </li>
            <li> <a href="#">
            <div class="name">short<span class="ih-dummy">12345</span></div>
            <div class="ih">12345</div>
          </a>

            </li>
            <li> <a href="#">
            <div class="name">really really really long<span class="ih-dummy">1234567</span></div>
            <div class="ih">1234567</div>
          </a>

            </li>
        </ul>
    </li>
</ul>

＆＃13;

Bootstrap下拉菜单项中的右对齐和垂直中间子文本

2 个答案: