如何调整 Twitter Bootstrap 弹出框的大小？

Question

我正在我的mvc项目中使用bootstrap。我在使用bootstrap popover小部件时遇到了问题。我已经为popover小部件创建了一个自定义的knockout绑定，代码如下： 查看fiddle

 ko.bindingHandlers.popover = {
        init: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var options = ko.utils.unwrapObservable(valuesAccessor() || {});

            options.html = true;

            options.content = '<small class="text-info">' + 'Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here. ' + '</small>';

            $(element).popover(options);
        },
        update: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var extraOptions = allBindingsAccessor().popoverOptions;

            $(element).popover(extraOptions.observable() ? "show" : "hide");
            $(element).siblings('.popover').css({ width: '150px' });

            //IF YOU UN-COMMENT BELOW 2 LINES THAN EVERY THINGS WORKS FINE

            //if(extraOptions.observable())
                //$(element).popover('show');
        }
    };

    function vm() {
        var self = this;

        self.isVisible = ko.observable(false);

        self.open = function () {
            self.isVisible(!self.isVisible());
        };
    }

    ko.applyBindings(new vm());

我希望能在任何具有可变文本消息和可变大小的元素上初始化弹出窗口。一切都正常，但是当我更改弹出窗口的默认宽度时，第一次打开时其位置不正确（请在fiddle中检查行为）。

fiddle中有一些代码行，如果您取消注释，则可以解决此问题。但我觉得这是一种hacky方法，我想找到更好的处理方式是否存在？

- user1740381

Answer 1

以下是我使用的示例初始化。

    $(".property-price")
    .popover({ 
            trigger: "hover", 
            placement: 'bottom',
            toggle : "popover",
            content : "The from price is calculated ba....the dates selected.",
            title: "How is the from price calculated?",
            container: 'body',
            template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
        });

正如您所看到的，它使用了自定义模板。该模板使用了自定义的popover-medium类。

然后我有一个CSS选择器

.popover-medium {
    max-width: 350px;
}

如果需要的话，您也可以在模板类上设置样式。

- Layke

---

PS. 所有我找到的答案都试图过度复杂化这个简单的任务。这是最简单的非hacky解决方案。 - Layke

Answer 2

演示

尝试使用我编辑过的代码

ko.bindingHandlers.popover = {
        init: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var options = ko.utils.unwrapObservable(valuesAccessor() || {});



            options.html = true;

            options.content = '<small class="text-info">' + 'Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here. ' + '</small>';

            $(element).popover(options);


        },
        update: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var extraOptions = allBindingsAccessor().popoverOptions;

            $(element).popover(extraOptions.observable() ? "show" : "hide");


            //IF YOU UN-COMMENT BELOW 2 LINES THAN EVERY THINGS WORKS FINE

            //if(extraOptions.observable())
                //$(element).popover('show');
        }
    };

    function vm() {
        var self = this;

        self.isVisible = ko.observable(false);

        self.open = function () {
            self.isVisible(!self.isVisible());
        };
    }

    ko.applyBindings(new vm());

只需添加以下CSS即可：

.popover {
    max-width: 150px;
    width: auto;
}

希望这能帮到您，谢谢。

- SarathSprakash

---

弹出窗口的宽度在您的演示中不是150，而是默认值。 - user1740381

@user1740381 现在它可以工作了，我已经编辑了代码。看看吧。 - SarathSprakash

Answer 3

你在初始化弹出框之后更改了宽度。弹出框的计算左上角位置保持不变，但宽度变小了。这会导致高度变大。

你需要重新排列事件，以便在初始化弹出框之前应用宽度。

- isherwood

---

我已经这样做了，但是在初始化之前弹出框div并不存在，所以更改没有任何效果。 - user1740381

我试图提供一个演示，但我不确定您的宽度调整是基于什么。它似乎是随意的。为什么不直接使用CSS设置宽度？ - isherwood