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

Question

我对插入符号的正确对齐有一个问题.在跨度中使用.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;}

Answer 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%;
}

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

Answer 3

只需互换 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;
    }

您可以通过添加 more 来将文本更靠左对齐padding-right。