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


当前回答

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

其他回答

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

需要固定尺寸

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

需要的最大宽度:

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

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

对于typescript组件:

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          max-width: 100%;
        }
    `]
})

在Bootstrap 4上,你可以很容易地检查模板选项,通过覆盖max-width:

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

如果页面上有多个弹出窗口,这是一个很好的解决方案。

在bootstrap 4中,你可以简单地在你的样式中覆盖bootstrap变量$popover-max-width的默认值。SCSS文件如下:

$popover-max-width: 300px;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";

更多关于覆盖引导4默认值https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

我也有同样的问题。花了很长时间寻找答案,并找到了自己的解决方案: 在头部添加以下文本:

<风格type = " text / css " > .popover { max-width: 600 px; } > < /风格