Изменение ширины прокрутки twitter

Ответ 1

Вы можете изменить размеры popover с помощью CSS:

.popover{
    width:200px;
    height:250px;    
}

Но этот CSS изменит ALL popovers. Что вам нужно сделать, это поместить кнопку в элемент контейнера и использовать CSS следующим образом:

#containerElem .popover {
  width:200px;
  height:250px;
}

Вам также необходимо изменить data-container="#containerElem", чтобы он соответствовал вашему контейнеру.

ПРИМЕЧАНИЕ. Если ваш popover будет иметь ширину больше 276 пикселей, вам необходимо переопределить свойство max-width. Поэтому добавьте max-width: none в класс .popover {}.

Здесь jsFiddle: http://jsfiddle.net/4FMmA/

Ответ 2

Если вы хотите обработать ширину в javascript:

HTML (пример из Bootstrap)

<button id="exampleButton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top</button>

JavaScript:

Мы устанавливаем максимальную ширину при срабатывании события show.bs.popover:

var p = $("#exampleButton").popover();
p.on("show.bs.popover", function(e){
    p.data("bs.popover").tip().css({"max-width": "500px"});
});

http://jsfiddle.net/ctoesca/u3kSk

• Вы также можете добавить атрибут data-max-width на элемент кнопки и получить значение в функции триггера:

p.on("show.bs.popover", function(e){
    var w = $(this).attr("data-max-width");
    p.data("bs.popover").tip().css({"max-width": w});
});

Ответ 3

.popover{
    max-width: 100%;
    width: <width>;
}

"max-width" устанавливает максимальную ширину popover в ширину страницы. Затем вы можете установить ширину, как вам нравится

Ответ 4

У меня может быть более простое решение:

Добавьте следующий класс css:

.app-popover-fw { width: 276px; } Код >

Используйте шаблон для

var newPopoverTemplate = '<div class="popover app-popover-fw" role="popover">' +
                             '<div class="arrow"></div>'+ 
                             '<h3 class="popover-title"></h3>'+
                             '<div class="popover-content"></div>'+
                          '</div>';

$('#example').popover({template: newPopoverTemplate });`

Рабочая скрипта: http://jsfiddle.net/b5Ly2ynd/

NB. Как отмечали другие, в bs popovers есть свойство max-width. Вам нужно изменить это, если вы хотите, чтобы ваш popover больше 276px.

Ответ 5

Вы можете настроить ширину popover, но лучше всего определить ширину содержимого до того, как видит Bootstrap. Например, у меня была таблица, я определил ее ширину, а затем bootstrap построил popover для этого. (Иногда Bootstrap имеет проблемы с определением ширины, и вам нужно войти и удерживать руку)

Ответ 6

Я использовал следующий код:

.popover {
      width: 600px;
      max-width: 600px;
      font-size: 13px;
      font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
      word-break: break-all;
      word-wrap: break-word;
      white-space: pre;
      width: 600px;
    }

Ответ 7

Используйте этот код. Он будет работать нормально:

  .popover{
       background-color:#b94a48;
       border:none;
       border-radius:unset;
       min-width:100px;
       width:100%;
       max-width:400px;
       overflow-wrap:break-word;
    }

Ответ 8

Другим вариантом является использование настраиваемого шаблона (добавлен только дополнительный класс: popover-lg):

<div class="popover popover-lg" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

Тогда в css:

.popover-lg {
    max-width: 100%;
}

Призвание:

$(".your-element")..popover({
        trigger: "hover",
        template: templateString,
        container: "body",
        content: '...',
    });

Таким образом, он чист и не мешает оригинальному бутстрап-поведению.

Ответ 9

Вы можете добиться этого двумя способами: одним из них является уменьшение размера шрифта для класса "popover", а другое - уменьшение заполнения в классе "popover-content". Вот как я это достиг,

.popover {
  font-size: 12px;
}

.popover-content {
  padding: 5px 5px;
}