18 回答

• 4

  用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 元素 . （View the JSFiddle）

  ---

  Twitter bootstrap容器

  如果这不起作用，您可能需要指定容器：

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

  回复于 2024-04-20T07:47:54+08:00
• 6

  我还需要一个更广泛的popover用于搜索文本字段 . 我想出了这个Javascript解决方案（这里是Coffee）：

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

  解决方法是在最后一行 . 在显示弹出窗口之前，max-width选项设置为自定义值 . 您还可以向tip元素添加自定义类 .

  回复于 2024-04-20T07:47:54+08:00
• 36

  我有同样的问题 . 花了很长时间寻找答案并找到了我自己的解决方案：将以下文字添加到头部：

  <style type =“text / css”>

  .popover {
  最大宽度：600px的;
  }
  </样式>

  回复于 2024-04-20T07:47:54+08:00
• 2

  要更改宽度，您可以使用css

  For fixed size wanted

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

  For max width wanted:

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

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

  回复于 2024-04-20T07:47:54+08:00
• -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>'
  })
  

  回复于 2024-04-20T07:47:54+08:00
• 1

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

  基本上我把popover代码放在行div中，而不是输入div . 解决了这个问题 .

  回复于 2024-04-20T07:47:54+08:00
• 6

  在@EML上面描述的关于模态窗口上的弹出窗口以及@ 2called-chaos显示的代码的帮助下，这就是我解决问题的方法 .

  我在模态上有一个图标，点击时应该弹出窗口

  我的HTML

  <i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line
  B - Second line - Long line 
  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"); });
  

  回复于 2024-04-20T07:47:54+08:00
• 27

  这里没有最终的解决方案：/只是一些想法如何“干净地”解决这个问题...

  原始JSFiddle的更新版本（jQuery 1.11 Bootstrap 3.1.1 class = "col-xs-"而不是class = "col-md-"）：http://jsfiddle.net/tkrotoff/N99h7/

  现在与你的proposed solution相同的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/

  也许，使用最近的浏览器，new CSS width values可以解决问题，我没有尝试 .

  回复于 2024-04-20T07:47:54+08:00
• 1

  container: 'body' 通常可以做到这一点（如果你的弹出窗口处于一个模态中，请参见JustAnil 's answer above), but there' sa问题 . 当弹出窗口附加到 body 时， z-index 将它置于模态后面 . 这似乎与BS2 issue 5014有关，但我'm getting it on 3.1.1. You'并不意味着使用 body 的 body ，但是如果您修复了代码

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

  然后你修复 z-index 问题，但弹出窗口宽度仍然是错误的 .

  我能找到的唯一解决方法是使用 container: 'body' 并添加一些额外的css：

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

  请注意，css解决方案本身不起作用 .

  回复于 2024-04-20T07:47:54+08:00
• 29

  您可以在弹出窗口中使用属性data-container =“body”

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

  回复于 2024-04-20T07:47:54+08:00
• 17

  这是使用悬停的非咖啡方式：

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

  回复于 2024-04-20T07:47:54+08:00
• 0

  您可以使用上面指出的方法调整弹出窗口的宽度，但最好的办法是在Bootstrap看到之前定义内容的宽度并进行数学运算 . 例如，我有一个表，我定义了它的宽度，然后bootstrap构建了一个适合它的弹出窗口 . （有时Bootstrap无法确定宽度，你需要介入并握住它的手）

  回复于 2024-04-20T07:47:54+08:00
• 1

  对于喜欢JavaScript解决方案的人 . 在 Bootstrap 4 中，tip（）变成了getTipElement（），它返回了一个没有jQuery的对象 . 因此，为了在Bootstrap 4中更改弹出窗口的宽度，您可以使用：

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

  回复于 2024-04-20T07:47:54+08:00
• 3

  你还可以添加应该完成工作的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>
  

  回复于 2024-04-20T07:47:54+08:00
• 304

  我用过这个（工作正常）：

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

  回复于 2024-04-20T07:47:54+08:00
• 4

  <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”宽度设置为我想要的数字 . （其他ids或 class 将无法工作.....）祝你好运！

  #popover-content{
        width: 600px;
  
    }
  

  回复于 2024-04-20T07:47:54+08:00
• 3

  一个测试解决方案Bootstrap 4 beta：

  .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 对象的 option 并没有真正做到这一点[可能只是与CSS语句一起工作];

  此外，请记住Bootstrap 4 beta依赖popper.js进行弹出和工具提示定位（之前它是tether.js）

  回复于 2024-04-20T07:47:54+08:00
• 2

  试试这个：

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

  回复于 2024-04-20T07:47:54+08:00