Проблема с загрузкой twitter: правая выровняйте каретку в выпадающем заголовке

У меня проблема с правильным выравниванием каретки. Использование .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

Просто поменять блоки каретки и диапазона в 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.

Ответ 2

.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 class:

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

Ответ 3

Для этой задачи существует гораздо более простое решение. Этот стиль должен выглядеть наиболее естественным и быть наиболее восприимчивым ко всем обычаям, поскольку он не зависит от какого-либо заранее определенного макета (кроме стилей начальной загрузки).

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