改变引导弹窗的宽度

我正在使用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/

当前回答

<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。解决了这个问题。

2013-10-26 08:00:43

其他回答

 <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

我还需要一个更宽的弹出窗口搜索文本字段。我想出了这个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

使用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!) */
}

如果这不起作用，您可能需要下面的解决方案并更改容器元素。(查看JSFiddle)

推特引导容器

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

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

2014-03-17 16:29:14

试试这个:

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

2015-08-12 09:41:54

<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。解决了这个问题。

2013-10-26 08:00:43

改变引导弹窗的宽度

推荐文章

最新文章

标签