Размер загрузочного бутта Twitter

Ответ 1

Каретка является элементом psuedo css и построена с использованием границ прозрачного элемента. См. Ответ на - Как создается каретка в Twitter Bootstrap?, которая дает гораздо лучшее объяснение и полезные ссылки.

Чтобы ответить на ваш вопрос, вы можете создать новый класс css/overwrite .caret, чтобы увеличить границы до требуемого размера.

.caret {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000000;
}

увеличьте размер px, чтобы получить требуемый размер. Имейте в виду, что три значения должны быть одинаковыми, если вы хотите равносторонний треугольник.

Ответ 2

Поскольку я не могу прокомментировать принятый ответ, я хотел бы предложить настроить это решение на использование ширины границы, чтобы предотвратить глобальный цветной стиль каретки, меньше кода и включает автоматическое стилизацию кавычки dropup.

.caret {
    border-width: 8px;
}

Если вам нужна другая форма, вы можете использовать левый, правый, верхний, нижний:

border-left-width: 8px;
border-right-width: 8px;
border-top-width: 10px;
border-bottom-width: 10px;

или

border-width: 10px 8px 10px 8px;

и др.

Ответ 3

Если вы хотите стилизовать только "один" карет (или повторяющийся один вид), вы можете использовать атрибут "стиль" для изменения размера каретки. Например,

<span class="caret" style="border-width:8px;"></span>

Это не повлияет на другие элементы каретки, и будет затронут только тег, содержащий этот атрибут border-width!

В качестве альтернативы, если вы хотите сохранить стиль в вашем файле css, вы можете пометить атрибут id:

<span class="caret" id="c1"></span>

И добавьте стиль в свой .css следующим образом:

#c1{
    border-width:8px;
}

Ответ 4

Для тех, кто ищет поддержку Bootstrap 4 Alpha 6, вам просто нужно сменить селектор на .dropdown-toggle::after и переопределить то, что происходит от "_nav.scss", например:

.dropdown-toggle::after {
    display: inline-block; /* Default */
    width: 0; /* Default */
    height: 0; /* Default */
    margin-left: .3em; /* Default */
    vertical-align: middle; /* Default */
    content: ""; /* Default */
    border-top: .6em solid; /* caret size */
    border-right: .6em solid transparent; /* caret size */
    border-left: .6em solid transparent; /* caret size */
}

Надеюсь, это поможет тем, кто исследует Bootstrap 4 Alpha 6