Drop down menu twitter引导问题:右对齐下拉标题中的插入符号

Drop down menu twitter引导问题:右对齐下拉标题中的插入符号,drop-down-menu,twitter-bootstrap-3,caret,Drop Down Menu,Twitter Bootstrap 3,Caret,我对插入符号的正确对齐有问题。使用。在跨度中向右拉使其进入右上角 如何使它再次垂直居中? 我还想将文本向左对齐 只需在HTML中交换插入符号和跨距块: HTML <div class="btn-group cust-dropdown"> <button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown">

我对插入符号的正确对齐有问题。使用。在跨度中向右拉使其进入右上角

如何使它再次垂直居中? 我还想将文本向左对齐


只需在HTML中交换插入符号和跨距块:

HTML

   <div class="btn-group cust-dropdown">
                <button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span id= "titl">test</span><span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">test</a></li>
                    <li><a href="#">test 2</a></li>
                    <li><a href="#">test 3</a></li>
                </ul>
            </div>
通过添加更多的
右侧填充
,可以使文本更加向左对齐

.caret {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
    left: 90%;
    top: 45%;
    position: absolute;
}
使用绝对位置和上下百分比,我能够在下拉列表中右对齐插入符号。在Chrome、IE和FF中工作

编辑

以前的代码可以工作,但会更改插入符号的样式。如果您只想重新定位它以保持其样式,只需扩展Bootstrap的.caret类:

.caret {
    position: absolute;
    left: 90%;
    top: 45%;
}

这个问题有一个简单得多的解决方案。这种样式应该看起来最自然,对所有用法都最敏感,因为它不依赖于任何预先确定的布局(默认引导样式除外)


Hi-Hristo在文本上使用自定义“右键填充”可以正常工作,但由于下拉列表的宽度和文本的长度可能会发生变化,因此它不具有“响应性”。理想情况下,我希望文本和插入符号自动移动到下拉列表的左侧和右侧(使用垂直对齐中心)。如果将填充右移到百分比中,它将变得灵敏。另外,您已经将其宽度设置为200px,因此在不同分辨率下不会出现问题(如果愿意,您可以检查)。我不明白垂直对齐:中心将如何移动插入符号和文本。也许你能解释得更多?嗨,赫里斯托,我用了200px的宽度作为例子。我通过使用.caret找到了插入符号的快速解决方案{margin top:8px;float:right;}很好!谢谢你让我知道!页边空白顶部、右浮动技术在IE和chrome中效果很好,但在Firefox中效果很差。这一技术最初效果很好,但当我调整页面大小时,插入符号不会重新计算百分比,因此它变得不对齐。嗨@pjs,
@padding base vertical
不起作用。它还提供了验证错误padding base vertical不是“margin”属性的有效值。但是6px可以正常工作:)@padding base vertical只有在使用较少的CSS预处理器时才起作用。如果我们可以找到相对边距,而不是使用幻数6,那就更好了。
6px
就是
@padding base vertical
的值。首选方法是使用较少的预处理器并参考常数。
  .cust-dropdown {
        width: 200px;
    }

    #titl {

      padding-right: 10px;
    }
.caret {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
    left: 90%;
    top: 45%;
    position: absolute;
}
.caret {
    position: absolute;
    left: 90%;
    top: 45%;
}
.dropdown > .btn > .caret {
  float: right;
  margin: 6px 0;
  // if you are using Less, the you can reuse the actual vertical padding
  // margin: @padding-base-vertical 0;
}