改变引导弹窗的宽度

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

其他回答

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

2015-01-14 03:46:23

你可以在弹出窗口中使用属性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>

2016-12-22 13:29:48

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中或作为弹窗({})对象的选项都没有真正做到这一点[也许do可以，但只有与CSS语句一起];

另外，请记住Bootstrap 4 beta依赖于popper.js来定位弹出窗口和工具提示(在此之前是tether.js)

2017-08-18 15:36:02

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

需要固定尺寸

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

需要的最大宽度:

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

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

2013-10-18 12:08:07

<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

改变引导弹窗的宽度

推荐文章

最新文章

标签