Twitter Bootstrap в JavaScript выглядит неправильно - PullRequest
2 голосов
/ 26 сентября 2011

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

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

image

Как вы можете видеть, корпус 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>

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

Ответы [ 4 ]

6 голосов
/ 26 сентября 2011

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

3 голосов
/ 09 января 2012

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

  .content {
    background-color: #fff;
    padding: 20px;
    margin: 0 -20px;
    ...
  }
2 голосов
/ 19 октября 2011

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

.popover .content {
margin: 0;
}

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

0 голосов
/ 18 февраля 2016

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

...