更改 Bootstrap 弹出框的宽度 [英] Changing the width of Bootstrap popover
问题描述
我正在使用 Bootstrap 3 设计页面.我正在尝试在输入元素上使用带有 placement: right
的弹出框.新的 Bootstrap 确保如果你使用 form-control
你基本上有一个全角输入元素.
HTML 代码如下所示:
<div class="col-md-6"><label for="name">名称:</label><input id="name" class="form-control" type="text"数据切换=弹出"数据触发=悬停"data-content="我的弹幕内容.我的弹幕内容.我的弹幕内容.我的弹幕内容."/>
popovers 的宽度太低,在我看来,因为它们在 div 中没有任何宽度.我想要左侧的输入表单,右侧的宽弹出框.
大多数情况下,我正在寻找一种无需覆盖 Bootstrap 的解决方案.
附加的 JsFiddle.第二个输入选项.没有经常使用jsfiddle所以不知道,但是尝试增加输出框的大小以查看结果,在较小的屏幕上甚至看不到它.http://jsfiddle.net/Rqx8T/
<div class="row" data-toggle="popover" data-trigger="hover"data-content="我的弹出框内容.我的弹出框内容.我的弹出框内容.我的弹出框内容."><div class="col-md-6"><label for="name">名称:</label><input id="name" class="form-control" type="text"/>
基本上我将弹出代码放在行 div 中,而不是输入 div 中.解决了问题.
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.
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>
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.
Mostly, I'm looking for a solution where I don't have to override Bootstrap.
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>
Basically i put the popover code in the row div, instead of the input div. Solved the problem.
这篇关于更改 Bootstrap 弹出框的宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!