Bootstrap popover width для popover-inner

Я бы хотел, чтобы Bootstrap Popover был шире. Я прочитал, что это должно сработать:Bootstrap popover width для popover-inner

.popover-inner a { 
    width: 600px; 
}

Но в консоли браузера по-прежнему отображается авто с указанным выше кодом. Трудно описать. Вот снимок:

enter image description here

источник

2013-04-02 Reddirt

Исходя от того, что у меня есть в моем файле bootstrap.css, по умолчанию это максимальная ширина свойства.

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

.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 файлов не содержит селектор CSS поповер-внутреннего вообще хоть

источник

2013-04-03 00:00:51 lbdm44

Спасибо за ответ! – Reddirt

Добро пожаловать – lbdm44

+10

Что делать, если вы хотите, чтобы popover был более широким на одной определенной странице? Или ... как мне изменить ширину динамически? Кто-нибудь должен был столкнуться с этим? – ElPiter

Там в pull request на загрузчик, чтобы сделать это проще, но вы можете modify it using this technique из установки template варианта для пирог:

$('#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>' 
})

Затем вы можете установить поповер special-class CSS, как вам нравится (ширина и больше!)

источник

2013-12-04 02:02:33

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

$(".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; 
}

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

источник

2014-01-26 11:14:13 Layke

Если вы хотите контролировать минимальную ширину окна поповера, просто добавьте дополнительную строку в CSS (или дополнительные C), как это:

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

(заменить 200px с требуемым значением)

источник

2014-03-10 22:38:09 eheydenr

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

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

источник

2014-04-25 18:15:06 JVK

Это помогло мне :) –

... 
width:auto; 
...

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

источник

2014-07-23 13:20:28

1) Легкий способ: (предупреждение: это затронет все Popovers):

Просто переопределить самозагрузки.стили поповер как ниже

.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 как ниже:

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

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

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

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

источник

2014-12-31 10:36:42 Dhanushka

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

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

источник

2015-10-26 23:12:01 nicorellius

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

.popover { 
    max-width: none; 
}

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

источник

2016-02-25 17:39:27

Добавить содержание поповер как HTML с собственным классом, а затем в CSS файл дополнения:

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

«.own-класс» ширина элемента будет определять ширину поповер.

источник

2017-03-03 14:09:09 GeistZero

Bootstrap popover width для popover-inner

ответ

Смежные вопросы