Ширина загрузочного лотка для popover-inner

Ответ 1

Основываясь на том, что у меня есть в моем файле bootstrap.css, по умолчанию это свойство max-width.

Я использую этот

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 600px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

и он работает именно так, как вы намеревались.

Мои файлы bootstrap.css не содержат popover-inner селектор css, хотя

Ответ 2

Там тянуть запрос в бутстрапе, чтобы сделать это проще, но вы можете измените его, используя этот метод, чтобы установить опцию template для popover:

$('#yourPopover').popover({
  template: '<div class="popover special-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})

Затем вы можете установить свой popover special-class css, как вам нравится (ширина и многое другое!)

Ответ 3

.popover {
  max-width: 600px;
  width: auto;
}

измените максимальную ширину на желаемое значение. Вы также можете установить min-width, если хотите

Ответ 4

Если вы хотите контролировать минимальную ширину вашего окна popover, просто добавьте дополнительную строку в css (или дополнительный css), например:

.popover
{
    min-width: 200px ! important;
}

(замените 200px на желаемое значение)

Ответ 5

1) Простой способ: (предупреждение: это повлияет на все popovers):

Просто переопределите стили bootstrap.popover, как показано ниже

.popover{
    max-width: 600px; 
}

2) Рекомендуемый способ:

$("#a-div-id-001").popover({
    //set a custom container
    // which can minimize the displacement of popover
    //when window resizing
    container: $("#Div"),
    html : true,
    content: function() {
        return "<span>Hello there!</span>";
    },
    viewport: {
        selector: 'body',
        padding: 10
    },
    title:"Apps",
    template:'<div class="popover my-custom-class" role="tooltip">'
        +'<div class="arrow"></div><h3 class="popover-title"></h3>'
        +'<div class="popover-content"></div>'
        +'</div>'
});

Сначала добавьте настраиваемый класс в шаблон popover, как и выше моего класса. Обратите внимание, что popover будет отображаться при использовании шаблона по умолчанию, если вы не указали настраиваемый шаблон.

Затем переопределите стили bootstrap.popover, как показано ниже:

div.popover.my-custom-class{
    max-width: 600px;
}

Эти стили позволяют вам иметь динамическую ширину до 600 пикселей. Если вам нужно установить минимальную ширину для popover, просто установите параметр ширины напрямую. см. пример ниже,

div.popover.my-custom-class{
    min-width: 600px;
}

При увеличении ширины вам может потребоваться отрегулировать пространство (смещение) между полем popover и границей влево/вправо. См. Свойство viewport, так как оно устанавливает границы.

Ответ 6

Отключить max-width в .popover:

.popover {
    max-width: none;
}

И тогда вы можете играть с размером контента более свободно.

Ответ 7

Вот пример инициализации, который я использую.

    $(".property-price")
    .popover({ 
            trigger: "hover", 
            placement: 'bottom',
            toggle : "popover",
            content : "The from price is calculated ba....the dates selected.",
            title: "How is the from price calculated?",
            container: 'body',
            template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
        });

Как вы можете видеть, он использует настраиваемый шаблон. Шаблон использует пользовательский класс popover-medium.

Затем у меня есть селектор CSS

.popover-medium {
    max-width: 350px;
}

Вы также можете просто установить стиль в классе шаблонов, если хотите.

Ответ 8

Некоторые ответы здесь рекомендуют просто сделать класс popover определенной шириной. Это не хорошо, потому что это влияет на все popovers. Вместо этого используйте нечто подобное:

.container-div .popover {
    /* add styles here */
}

Ответ 9

...
width:auto;
...

было идеальным решением в моем случае. У меня было несколько popovers на одной странице, и у одного из них был длинный URL. Теперь все они выглядят неплохо. Спасибо, JFK!

Ответ 10

Добавьте свой popover-контент как HTML с вашим собственным классом, а затем в файл CSS добавьте:

.popover .own-class { width: ... }

". Ширина элемента собственного класса будет определять ширину popover.