Я розробляю сторінку за допомогою Bootstrap 3. Я намагаюся використовувати popover з placement: rightна вхідному елементі. Новий Bootstrap гарантує, що якщо ви використовуєте, form-controlви в основному маєте вхідний елемент повної ширини.

HTML-код виглядає приблизно так:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

На мою думку, ширина запоїв занадто мала, тому що їхня ширина не залишилась у діві. Я хочу форму введення з лівого боку, а широкий перехід на правій стороні.

Здебільшого я шукаю рішення, де мені не доведеться перекривати Bootstrap.

Доданий JsFiddle. Другий варіант введення. Не використовував jsfiddle багато, тому не знаю, але спробуйте збільшити розмір вихідного поля, щоб побачити результати, на менших екранах його навіть не побачили. http://jsfiddle.net/Rqx8T/

Збільшити ширину за допомогою CSS

Ви можете використовувати CSS для збільшення ширини вашої поїздки так:

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Якщо це не працює, ви, мабуть, хочете рішення нижче та змінити свій containerелемент. ( Переглянути JSFiddle )

Контейнер завантажувального пристрою Twitter

Якщо це не працює, вам, ймовірно, потрібно вказати контейнер:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

Більше інформації

Попова міститься в елементі, в який він запускається. Щоб розширити його "на повну ширину" - вкажіть контейнер:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

JSFiddle

Перегляньте JSFiddle, щоб випробувати його.

JSFiddle: http://jsfiddle.net/xp1369g4/

Мені також знадобився ширший перехід для пошукового текстового поля. Я придумав таке рішення Javascript (тут, у каві ):

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

Обхід знаходиться в останньому рядку. Перед відображенням потужності параметр максимальної ширини встановлюється на спеціальне значення. Ви також можете додати спеціальний клас до елемента наконечника.

У мене була така ж проблема. Витратив досить багато часу на пошук відповіді і знайшов власне рішення: Додайте до голови наступний текст:

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

Для зміни ширини можна використовувати css

Для фіксованого розміру потрібно

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

Для потрібної максимальної ширини:

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

jsfiddle : http://jsfiddle.net/Rqx8T/2/

Щоб змінити ширину потужності, ви можете змінити шаблон:

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})

Для людей, які віддають перевагу рішення JavaScript. У Bootstrap 4 tip () став getTipElement (), і він повертає об'єкт no jQuery. Отже, щоб змінити ширину потужності в Bootstrap 4, ви можете використовувати:

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

В основному я ставлю код переходу в рядок div, а не вхідний div. Вирішили проблему.

За допомогою того, що @EML описав вище щодо переходу на модальні вікна, а також коду, показаного @ 2called-chaos, ось як я вирішив проблему.

У мене є значок на модалі, який при натисканні повинен спливати

Мій HTML

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

Мій сценарій

    $('[rel=popover]').popover({
        placement: 'bottom',
        html: 'true',
        container: '#name-of-modal-window .modal-body'
    }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });

Тут немає жодного остаточного рішення: / Просто кілька думок, як "чисто" вирішити цю проблему ...

Оновлена ​​версія (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" замість class = "col-md-") оригіналу JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

Тепер той самий JSFiddle із запропонованим рішенням : http://jsfiddle.net/tkrotoff/N99h7/8/
Не працює: popover розташований відносно <div class="col-*">+ уявіть, що у вас є кілька входів для одного і того ж <div class="col-*">...

Тож якщо ми хочемо зберегти перехід на входах (семантично краще):

• .popover { position: fixed; }: але тоді кожного разу, коли ви прокручуєте сторінку, показник не буде слідувати прокрутці
• .popover { width: 100%; }: не так добре, оскільки ти все ще залежить від батьківської ширини (тобто <div class="col-*">
• .popover-content { white-space: nowrap; }: добре, лише якщо текст всередині попору коротший за max-width

Дивіться http://jsfiddle.net/tkrotoff/N99h7/11/

Можливо, за допомогою останніх браузерів нові значення ширини CSS можуть вирішити проблему, я не намагався.

container: 'body'як правило, хитрість (див. відповідь JustAnil вище), але є проблема, якщо ваш поповер в режимі. Розташовує z-indexйого за модалом, коли попова приєднана body. Здається, це пов’язано з номером 5014 BS2 , але я отримую це на 3.1.1. Ви не призначені використовувати containerз body, але якщо ви виправити код для

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

тоді ви вирішите z-indexпроблему, але ширина потужності все ще неправильна.

Єдине виправлення, яке я можу знайти, - це використовувати container: 'body'та додати додатковий css:

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

Зауважте, що рішення css самі по собі не працюватимуть.

Ви можете використовувати атрибут data-container = "body" в межах popover

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>

Ось такий, що не використовується кофескриптом, як це зробити за допомогою наведення курсору:

$(".product-search-trigger").popover({
    trigger: "hover",
    container: "body",
    html: true,
    placement: "left"
  }).on("show.bs.popover", function() {
    return $(this).data("bs.popover").tip().css({
      maxWidth: "300px"
    });
  });
});

Одне випробуване рішення для бета-версії Bootstrap 4:

.popover {
        min-width: 30em !important;
    }

Разом з оператором jQuery:

$('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'focus',
      html: true,
      placement: 'top'
    })

Побічна примітка, data-container="body"або container: "body"в будь-якому HTML або як optionдоpopover({}) об'єкту дійсно не зробити трюк [можливо зробити роботу , але тільки разом із затвердженням CSS];

Крім того, пам’ятайте, що бета-версія Bootstrap 4 покладається на popper.js для свого позиціонування та їх підказки (до цього це було tether.js)

Ви можете відрегулювати ширину потужності за допомогою вказаних вище методів, але найкраще зробити це визначити ширину вмісту до того, як Bootstrap бачить, і робить його математику. Наприклад, у мене була таблиця, я визначив її ширину, а потім завантажувач збудував поповер, щоб його задовольнити. (Іноді Bootstrap має проблеми з визначенням ширини, і вам потрібно вступити і потримати його за руку)

Я використав це (добре працюючи):

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

 <label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover"  data-placement="right" id="Pops" ></a>  
<div id="popover-content" class="hide">
  <div class="popovermenu">
        Your content                   
  </div>
 </div>

В кінцевому підсумку, встановивши div "popover-content" ширину на потрібне число. (інші ідентифікатори чи клас не працюватимуть .....) Удачі!

  #popover-content{
      width: 600px;

  }

Ви також можете додати data-container = "body", який повинен виконати цю роботу:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover"

                         data-container="body"

                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

Ви можете змінити шаблон вашої поїздки. Або з data-template-attribute або з відповідною частиною функції, яка його встановлює:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class=&quot;popover fade top in&quot; style=&quot;max-width:none;&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-title&quot;></h3><div class=&quot;popover-content&quot;></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span>
  </body>
</html>

Для компонента машинопису:

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          max-width: 100%;
        }
    `]
})

У кутовому ng-bootstrapви можете просто container="body"керувати тим, що спрацьовує на переході (наприклад, кнопці або текстовому полі). Потім у глобальний ( style.cssабо style.scss) файл стильового файлу ви повинні додати .popover { max-width: 100% !important; }. Після цього вміст переїзду автоматично встановиться на ширину вмісту.

У bootstrap 4 ви можете просто змінити значення за замовчуванням змінної bootstrap $popover-max-widthу вашому файлі styles.scss так:

$popover-max-width: 300px;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";

Докладніше про переосмислення параметрів завантаження 4 за замовчуванням https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

На Bootstrap 4 ви можете легко переглянути параметр шаблону, змінивши максимальну ширину:

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

Це хороше рішення, якщо у вас є кілька переїздів на сторінці.

Спробуйте це:

var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));