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

【问题标题】：Right align and vertically middle subtext in Bootstrap dropdown menu itemBootstrap下拉菜单项中的右对齐和垂直居中的子文本
【发布时间】：2015-10-13 07:40:36
【问题描述】：

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

123 和 12345 浮动到各自行的顶部。 1234567 已意外换行

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

<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.ih {
    font-size: 85%;
    float: right;
}
.name {
    float:left;
}
</style>
</head>
<body>
<ul class="nav navbar-nav">
<li class="dropdown open">
<ul class="dropdown-menu" id="a">
<li>
<a href="#">
<div class="name">blah blah</div>
<div class="ih">123</div>
</a>
</li>
<li>
<a href="#">
<div class="name">short</div>
<div class="ih">12345</div>
</a>
</li>
<li>
<a href="#">
<div class="name">really really really long</div>
<div class="ih">1234567</div>
</a>
</li>
</ul>
</li>
</ul>
</body>

【问题讨论】：

对我来说听起来很合乎逻辑...同一行有两个元素，如果第一个元素太长，则第二个元素转到下一行...
它应该扩展以适应内容。它通常会持续到花车参与。如果没有 Bootstrap，它会按预期工作。
它与“下拉样式”相关... Bootstrap 为 .dropdown 类定义了一些属性。要对其进行测试，只需为您的 .dropdown 项目添加一个固定宽度...
使用“float”属性设置您的项目使它们在容器宽度上“不受影响”。

标签： html css twitter-bootstrap css-float vertical-alignment

【解决方案1】：

如果您需要使用 Bootstrap，那么最好使用 Bootstrap 工件（CSS 和组件），而不是与您自己的布局作斗争。然后在 Bootstrap 上自定义您的样式。这样代码维护起来会更容易。

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

在下面的示例小提琴中，只需拖动拆分器以增加/减少结果窗格的大小，以查看它在所有媒体查询宽度中的表现。对于示例 sn-p，只需全屏查看即可。

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

片段：

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

<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>

【讨论】：

【解决方案2】：

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

有两种方法可以解决这个问题。

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

选项 2# 在.name 类中添加相同的文本并生成opacity:0;。并且，不要为 .ih 类浮动，而是在其上执行 position: absolute; right: 0; top:6px; 并添加以下 css。

下面是代码的样子。

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

<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>

【讨论】：