Положение бутстрап поповер

Question

Я пытаюсь реализовать popover для выбора языка, но сталкиваюсь с двумя проблемами:

1) Всплывающее окно скрывается над нижним колонтитулом, когда я применяю position: absolute; к нижнему колонтитулу.

2) Поповер прилипает к правой стороне моей страницы. Я хотел бы получить запас там, но margin-right, похоже, не дает эффекта.

Вот jsfiddle .

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

РЕДАКТИРОВАТЬ: я исправил первую проблему, добавив {container: 'body'} к подсказке . Второй еще открыт ...

РЕДАКТИРОВАТЬ 2: мне удалось добавить поля справа с помощью:

.popover
{
  right: 10px !important;
  left: auto !important;
}

Единственная проблема теперь состоит в том, что стрелка больше не центрирована с текстом под стрелкой ... какие-либо подсказки?

Answer 1

Один из способов сделать это - добавить фиксированную позицию position:fixed; right:40px; к вашему #wrapper. Это позволит вам отрегулировать свое положение влево и / или вправо. Однако, если вы попытаетесь отрегулировать верх или низ, он вырвется из своего родительского контейнера и будет относительно документа. Поэтому, если вам нужно внести коррективы в верх или низ, используйте поля.

#wrapper{
  min-height: 50px;
  max-height: 100px;
  display: flex;
  align-items: center;
  position:fixed;
  right:40px;
}