改变引导弹窗的宽度

我正在使用Bootstrap 3设计一个页面。我试图使用一个弹窗的位置:正确的输入元素。新的Bootstrap确保如果你使用表单控件，你基本上有一个全宽的输入元素。

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>

弹窗宽度太低，在我看来，因为他们没有任何宽度留在div。我想在左侧输入表单，并在右侧宽弹窗。

大多数情况下，我正在寻找一个解决方案，我不需要覆盖引导。

附上的JsFiddle。第二个输入选项。没有使用jsfiddle很多，所以不知道，但尝试增加输出框的大小来查看结果，在较小的屏幕上甚至看不到它。 http://jsfiddle.net/Rqx8T/

当前回答

我还需要一个更宽的弹出窗口搜索文本字段。我想出了这个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元素添加自定义类。

2014-03-12 16:44:12

其他回答

 <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”宽度为我想要的数字。(其他id 或类将无法工作.....)好运！

  #popover-content{
      width: 600px;

  }

2018-01-24 03:32:39

container: 'body'通常是这样的(参见上面JustAnil的回答)，但如果你的弹窗是在一个模态中，就会有一个问题。当弹窗附加到body时，z索引将它放在模态后面。这似乎与BS2 5014问题有关，但我在3.1.1上得到了它。你不需要使用容器的主体，但是如果你将代码修正为

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

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

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

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

注意，css解决方案本身是不起作用的。

2014-08-15 12:58:51

在Angular ng-bootstrap中，你可以简单地将container="body"添加到触发弹窗(比如按钮或文本框)的控件中。然后在你的全局样式文件(style.css或style.scss)文件中，你必须添加.popover {max-width: 100% !}。之后，弹出窗口的内容将自动设置为其内容宽度。

2019-10-29 15:44:31

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

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

现在使用您提出的解决方案:http://jsfiddle.net/tkrotoff/N99h7/8/ 它不起作用:弹出窗口的定位相对于<div class="col-*"> +想象你有多个输入相同的<div class="col-*">…

所以如果我们想让弹出窗口保持在输入上(语义上更好):

.popover{位置:固定;}:但是当你每次滚动页面时，弹出窗口将不会跟随滚动 .popover{宽度:100%;}:不是很好，因为你仍然依赖于父宽度(即<div class="col-*"> .popover-content {white-space: nowrap;}:仅当弹出窗口内的文本短于max-width时才有效

参见http://jsfiddle.net/tkrotoff/N99h7/11/

也许，使用最近的浏览器，新的CSS宽度值可以解决这个问题，我没有尝试。

2014-03-12 19:40:28

您可以使用上述方法调整弹出窗口的宽度，但最好的方法是在Bootstrap看到并进行计算之前定义内容的宽度。例如，我有一个表，我定义了它的宽度，然后bootstrap建立了一个弹窗来适应它。(有时Bootstrap很难确定宽度，你需要介入并握住它的手)

2015-01-14 03:46:23

改变引导弹窗的宽度

推荐文章

最新文章

标签