Twitter Bootstrap в JavaScript выглядит неправильно

Question

Я пытаюсь реализовать Popover Bootstrap JS ( this ), и по какой-то причине он не отображается так, как должен.

Это то, что я получаю

Как вы можете видеть, корпус Popover смещен влево, и граница как бы нарушена.

Вот мой код

<a class="btn success" id="previewBeforeSubmit"  href="#"
 data-original-title="Test" data-content="Lorem Ipsum">Save Changes</a>

<script type="text/javascript">
   $("#previewBeforeSubmit").popover({position: 10, placement: 'above'});
</script>

Есть какие-либо подсказки относительно того, что это вызывает?

Answer 1

Скорее всего, конфликт CSS.Ваши существующие правила CSS могут добавлять атрибуты к атрибутам поповера.Я хотел бы начать с проверки в FireBug и посмотреть, какие правила CSS наследуются от куда.

Answer 2

Полагаю, вы используете пример контейнера . Если да, вы можете решить эту проблему, закомментировав строку margin: 0 -20px. Появляется в следующем блоке:

  .content {
    background-color: #fff;
    padding: 20px;
    margin: 0 -20px;
    ...
  }

Answer 3

Это маржа, добавьте

.popover .content {
margin: 0;
}

это должно решить вашу проблему.

Answer 4

Более универсальным решением является добавление data-container='body' к элементу, чтобы он не наследовал правила CSS от (и через) элемента.