更改Bootstrap弹出框的宽度 [英] Changing the width of Bootstrap popover

问题描述

我正在使用Bootstrap3设计一个页面。我想在输入元素上使用 placement：right 的弹出框。新的Bootstrap确保如果你使用 form-control ，你基本上有一个全角的输入元素。

I am designing a page using Bootstrap 3. I am trying to use a popover with placement: right on an input element. The new Bootstrap ensures that if you use form-control you basically have a full-width input element.

HTML代码看起来像这样：

The HTML code looks something like this:

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

popovers宽度太低，在我看来，因为他们没有任何宽度留在div 。
我想要在左侧的输入表单和一个宽的popover在右侧。

The popovers width is too low, in my opinion because their isn't any width left in the div. I want the input form on the left side, and a wide popover on the right side.

大多数情况下，我在寻找一个解决方案，我不必重写Bootstrap。

Mostly, I'm looking for a solution where I don't have to override Bootstrap.

附加的JsFiddle。第二个输入选项。没有使用jsfiddle很多所以不知道，但尝试增加输出框的大小以查看结果，在较小的屏幕上甚至不会看到它。
http://jsfiddle.net/Rqx8T/

The attached JsFiddle. The second input option. Haven't used jsfiddle a lot so don't know, but try increasing the size of the output box to see results, on smaller screens wouldn't even see it. 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>

基本上我把popover代码放在div行，而不是输入div。解决了问题。

Basically i put the popover code in the row div, instead of the input div. Solved the problem.

这篇关于更改Bootstrap弹出框的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！