twitter bootstrap问题：右对齐下拉标题中的插入号 [英] twitter bootstrap issue : Right align the caret in the dropdown header

问题描述

我对插入符号的正确对齐有疑问。在跨度中使用.pull-right可以使其到达右上角。

I have an issue with the right alignment of the caret. Using .pull-right in the span makes it go to the top right corner.

如何使其再次垂直居中？
我也想将文本向左对齐

How can I make it vertically centered again ? I also would like to align the text to the left

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

推荐答案

只需交换HTML中的插入符号和span块：

Just interchange the caret and span blocks in 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;
    }

您可以通过添加更多<$ c $来使文本向左对齐c>向右填充。

这篇关于twitter bootstrap问题：右对齐下拉标题中的插入号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！