twitter bootstrap问题:右对齐下拉标题中的插入符号

Posted

技术标签:

【中文标题】twitter bootstrap问题:右对齐下拉标题中的插入符号【英文标题】:twitter bootstrap issue : Right align the caret in the dropdown header 【发布时间】:2014-07-23 00:54:22 【问题描述】:

我对插入符号的正确对齐有疑问。在 span 中使用 .pull-right 会使其转到右上角。

如何使它再次垂直居中? 我也想把文字左对齐

http://www.bootply.com/r8x7g5Bw5R

                    <div class="btn-group cust-dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret pull-right"></span><span>test</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">test</a></li>
                        <li><a href="#">tes2</a></li>
                        <li><a href="#">test3</a></li>
                    </ul>
                </div>

和 CSS

.cust-dropdown 
width: 200px;

【问题讨论】:

【参考方案1】:
.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%;

【讨论】:

这最初工作得很好,但是当我调整页面大小时,插入符号不会重新评估百分比,所以它变得不对齐。【参考方案2】:

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

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

【讨论】:

嗨@pjs,@padding-base-vertical 不起作用。它还给出了验证错误padding-base-vertical is not a valid value for the "margin" property。但是 6px 工作正常 :) @padding-base-vertical 仅在您使用较少的 CSS 预处理器时才有效。 如果我们能找到一个相对边距而不是使用幻数 6 会更好。 6px@padding-base-vertical 的值,即defined as a constant in bootstrap。首选方法是使用 Less 预处理器并引用常量。【参考方案3】:

只需在 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>

CSS

  .cust-dropdown 
        width: 200px;
    

    #titl 

      padding-right: 10px;
    

您可以通过添加更多padding-right 使文本更靠左对齐。

【讨论】:

Hi Hristo 在文本上使用自定义的“padding-right”是可行的,但它不是“响应式”,因为下拉菜单的宽度和文本的长度可以改变。理想情况下,我希望文本和插入符号自动移动到下拉菜单的左侧和右侧(垂直对齐中心) 好吧,如果你把 padding-right 变成百分比,它就会变得响应。无论哪种方式,您已经将其设置为 200px 宽度,因此在不同的分辨率下不会有问题(如果您愿意,可以检查)。我不明白 vertical-align: center 如何移动插入符号和文本。也许你可以解释更多? 嗨 Hristo,我在示例中使用了 200px 宽度。我使用 .caret margin-top:8px;float:right; 找到了插入符号的快速解决方案 不错!谢谢你告诉我! margin-top、float-right 技术在 IE 和 chrome 中效果很好,但在 Firefox 中看起来很糟糕

以上是关于twitter bootstrap问题:右对齐下拉标题中的插入符号的主要内容,如果未能解决你的问题,请参考以下文章

Twitter Bootstrap 3:右对齐折叠导航问题

如何让我的 Twitter Bootstrap 按钮右对齐?

Bootstrap 4.0.0右对齐导航栏下拉菜单打开时超出视口[重复]

Bootstrap 4 Navbar:右对齐下拉菜单在右侧打开:溢出[重复]

Bootstrap如何让下拉菜单dropdown-menu整体DOM向右对齐

带有 twitter-bootstrap 的下拉菜单