Tôi đang thiết kế một trang bằng Bootstrap 3. Tôi đang cố gắng sử dụng một popover với placement: rightphần tử đầu vào. Bootstrap mới đảm bảo rằng nếu bạn sử dụng form-controlvề cơ bản bạn có một yếu tố đầu vào toàn chiều rộng.

Mã HTML trông giống như thế này:

<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>

Theo ý kiến ​​của tôi, chiều rộng của popovers quá thấp vì không phải là chiều rộng còn lại trong div. Tôi muốn hình thức đầu vào ở phía bên trái, và một cửa sổ bật lên rộng ở phía bên phải.

Hầu hết, tôi đang tìm kiếm một giải pháp mà tôi không phải ghi đè Bootstrap.

JsFiddle đính kèm. Tùy chọn đầu vào thứ hai. Không sử dụng jsfiddle rất nhiều vì vậy không biết, nhưng hãy thử tăng kích thước của hộp đầu ra để xem kết quả, trên các màn hình nhỏ hơn thậm chí sẽ không nhìn thấy nó. http://jsfiddle.net/Rqx8T/

Tăng chiều rộng với CSS

Bạn có thể sử dụng CSS để tăng chiều rộng cho cửa sổ bật lên của mình, như vậy:

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

Nếu điều này không hiệu quả, có lẽ bạn muốn giải pháp bên dưới và thay đổi thành containerphần của bạn . ( Xem JSFiddle )

Container bootstrap Twitter

Nếu điều đó không làm việc, có lẽ bạn cần chỉ định vùng chứa:

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

Thêm thông tin

Cửa sổ bật lên được chứa trong phần tử được kích hoạt. Để mở rộng "toàn bộ chiều rộng" - chỉ định vùng chứa:

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

Câu đố

Xem JSFiddle để dùng thử.

Mã thông báo: http://jsfiddle.net/xp1369g4/

Tôi cũng cần một cửa sổ bật lên rộng hơn cho trường văn bản tìm kiếm. Tôi đã đưa ra giải pháp Javascript này (ở đây trong Cà phê ):

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

Cách giải quyết là ở dòng cuối cùng. Trước khi cửa sổ bật lên được hiển thị, tùy chọn độ rộng tối đa được đặt thành giá trị tùy chỉnh. Bạn cũng có thể thêm một lớp tùy chỉnh vào phần tử tip.

Tôi đã từng gặp vấn đề tương tự. Dành khá nhiều thời gian để tìm kiếm một câu trả lời và tìm ra giải pháp của riêng tôi: Thêm văn bản sau vào đầu:

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

Để thay đổi chiều rộng, bạn có thể sử dụng css

Đối với kích thước cố định muốn

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

Đối với chiều rộng tối đa muốn:

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

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

Để thay đổi độ rộng popover, bạn có thể ghi đè lên mẫu:

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

Đối với những người thích giải pháp JavaScript. Trong Bootstrap 4 tip () đã trở thành getTipEuity () và nó trả về một đối tượng không có jQuery. Vì vậy, để thay đổi độ rộng của cửa sổ bật lên trong Bootstrap 4, bạn có thể sử dụng:

}).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>

Về cơ bản tôi đặt mã popover trong div hàng, thay vì div đầu vào. Đã giải quyết vấn đề.

Với sự giúp đỡ của những gì @EML đã mô tả ở trên liên quan đến cửa sổ bật lên trên các cửa sổ phương thức và cả mã được hiển thị bởi @ 2called-chaos, đây là cách tôi giải quyết vấn đề.

Tôi có một biểu tượng trên phương thức mà khi nhấp vào sẽ bật lên

HTML của tôi

<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>

Tập lệnh của tô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"); });

Không có giải pháp cuối cùng ở đây: / Chỉ cần một số suy nghĩ làm thế nào để "làm sạch" giải quyết vấn đề này ...

Phiên bản cập nhật (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" thay vì class = "col-md-") của JSFiddle ban đầu của bạn: http://jsfiddle.net/tkrotoff/N99h7/

Bây giờ, cùng một JSFiddle với giải pháp được đề xuất của bạn : http://jsfiddle.net/tkrotoff/N99h7/8/
Nó không hoạt động: cửa sổ bật lên được định vị so với <div class="col-*">+ hãy tưởng tượng bạn có nhiều đầu vào cho cùng một <div class="col-*">...

Vì vậy, nếu chúng tôi muốn giữ popover trên đầu vào (tốt hơn về mặt ngữ nghĩa):

• .popover { position: fixed; }: nhưng sau đó mỗi lần bạn cuộn trang, cửa sổ bật lên sẽ không theo cuộn
• .popover { width: 100%; }: không tốt vì bạn vẫn phụ thuộc vào chiều rộng cha mẹ (nghĩa là <div class="col-*">
• .popover-content { white-space: nowrap; }: chỉ tốt nếu văn bản bên trong cửa sổ bật lên ngắn hơn max-width

Xem http://jsfiddle.net/tkrotoff/N99h7/11/

Có lẽ, bằng cách sử dụng các trình duyệt gần đây, các giá trị độ rộng CSS mới có thể giải quyết vấn đề, tôi đã không thử.

container: 'body'thông thường thực hiện mẹo (xem câu trả lời của JustAnil ở trên), nhưng có một vấn đề nếu cửa sổ bật lên của bạn ở chế độ. Các z-indexvị trí phía sau phương thức khi cửa sổ bật lên được gắn vào body. Điều này dường như có liên quan đến vấn đề BS2 5014 , nhưng tôi đang nhận được nó vào ngày 3.1.1. Bạn không có nghĩa là để sử dụng một containersố body, nhưng nếu bạn khắc phục các mã để

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

Sau đó, bạn khắc phục sự z-indexcố, nhưng chiều rộng popover vẫn sai.

Cách khắc phục duy nhất tôi có thể tìm thấy là sử dụng container: 'body'và thêm một số css bổ sung:

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

Lưu ý rằng các giải pháp css tự chúng sẽ không hoạt động.

Bạn có thể sử dụng thuộc tính data-container = "body" trong 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>

Đây là cách không phải là cà phê để làm điều đó với hover:

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

Một giải pháp đã được thử nghiệm cho Bootstrap 4 beta:

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

Cùng với câu lệnh jQuery:

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

Side-nốt, data-container="body"hoặc container: "body"trong HTML hoặc như một optionđếnpopover({}) đối tượng đã không thực sự làm các trick [có lẽ là làm việc nhưng chỉ cùng với báo cáo kết quả CSS];

Ngoài ra, hãy nhớ rằng Bootstrap 4 beta dựa trên popper.js để định vị popover và tooltip của nó (trước đó là tether.js)

Bạn có thể điều chỉnh độ rộng của cửa sổ bật lên bằng các phương pháp được chỉ ra ở trên, nhưng điều tốt nhất cần làm là xác định độ rộng của nội dung trước khi Bootstrap nhìn thấy và thực hiện phép toán của nó. Ví dụ, tôi có một bảng, tôi xác định chiều rộng của nó, sau đó bootstrap đã tạo một cửa sổ bật lên cho phù hợp với nó. (Đôi khi Bootstrap gặp khó khăn khi xác định chiều rộng và bạn cần bước vào và nắm tay nó)

Tôi đã sử dụng (hoạt động tốt):

.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>

Tôi kết thúc bằng cách đặt chiều rộng div "popover-content" thành số tôi muốn. (id hoặc lớp khác sẽ không hoạt động .....) Chúc may mắn!

  #popover-content{
      width: 600px;

  }

bạn cũng có thể thêm data-container = "body" sẽ thực hiện công việc:

<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>

Bạn có thể thay đổi mẫu của popover của bạn. Hoặc với phần data-templateđóng góp hoặc với phần có liên quan trong chức năng thiết lập nó:

<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>

Đối với một thành phần bản in:

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

Trong Angular, ng-bootstrapbạn có thể chỉ cần container="body"điều khiển kích hoạt popover (chẳng hạn như nút hoặc hộp văn bản). Sau đó, trong tệp định kiểu toàn cầu ( style.csshoặc style.scss) tệp bạn phải thêm .popover { max-width: 100% !important; }. Sau đó, nội dung của cửa sổ bật lên sẽ tự động được đặt thành chiều rộng nội dung của nó.

Trong bootstrap 4, bạn có thể chỉ cần ghi đè giá trị mặc định của biến bootstrap $popover-max-widthtrong tệp Styles.scss của bạn như vậy:

$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";

Thông tin thêm về ghi đè bootstrap 4 mặc định https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Trên Bootstrap 4, bạn có thể dễ dàng xem lại tùy chọn mẫu, bằng cách ghi đè chiều rộng tối đa:

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

Đây là một giải pháp tốt nếu bạn có một vài cửa sổ bật lên trên trang.

Thử cái này:

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));