改变引导弹窗的宽度

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

当前回答

下面是使用hover的非coffeescript方式:

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

2017-01-25 23:29:43

其他回答

对于喜欢JavaScript解决方案的人。在Bootstrap 4中tip()变成了getTipElement()，它返回一个非jQuery对象。所以为了改变弹出窗口的宽度在Bootstrap 4你可以使用:

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

2018-01-15 23:42:33

我使用了这个(工作正常):

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

2016-08-12 09:41:46

试试这个:

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

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

2015-01-14 03:46:23

要改变宽度，你可以使用css

需要固定尺寸

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

需要的最大宽度:

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

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

2013-10-18 12:08:07

改变引导弹窗的宽度

推荐文章

最新文章

标签