Html Bootstrap popover太窄了
我有一个bootstrap3表单,其中我有一个popover,它位于第一个文本输入的右侧。popover在该输入的焦点上被触发,并且触发器工作正常。我的问题是我希望popover更宽一些,这样我可以有更长的文本行,但它似乎包含在父级Html Bootstrap popover太窄了,html,twitter-bootstrap,twitter-bootstrap-3,popover,Html,Twitter Bootstrap,Twitter Bootstrap 3,Popover,我有一个bootstrap3表单,其中我有一个popover,它位于第一个文本输入的右侧。popover在该输入的焦点上被触发,并且触发器工作正常。我的问题是我希望popover更宽一些,这样我可以有更长的文本行,但它似乎包含在父级.col-xs-6中。有没有办法将其放在.container fluid中,这样它就可以占据右侧的空白区域 下面是HTML,上面的JSFIDLE演示了这个问题。谢谢 <div class="container-fluid"> <div c
.col-xs-6
中。有没有办法将其放在.container fluid
中,这样它就可以占据右侧的空白区域
下面是HTML,上面的JSFIDLE演示了这个问题。谢谢
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 panel panel-gray floating">
<div class="panel-body">
<form action="?" method="POST" id="foo">
<div class="form-group">
<h3>Set your new password</h2>
</div>
<div class="form-group form-group-lg">
<label for="new-password">New password</label>
<input type="password" class="form-control" id="new-password" autofocus data-toggle="popover" data-content="8-20 characters long" data-trigger="focus" data-placement="right" viewport="container">
</div>
<div class="form-group form-group-lg">
<label for="confirm-new-password">Confirm new password</label>
<input type="password" class="form-control" id="confirm-new-password">
</div>
<div class="form-group form-group-lg">
<label for="security-answer">Answer your security question:</label>
<p id="security-question">How many cups of sugar does it take to get to the moon?</p>
<input type="text" class="form-control" id="security-answer">
</div>
<div class="btn-group-lg">
<input type="submit" value="Change password" class="btn btn-primary btn-block" id="btn_changePassword">
</div>
</form>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
设置新密码
新密码
确认新密码
回答您的安全问题:
登上月球需要多少杯糖
您只需设置数据容器
属性,告诉popover要使用哪个元素,因为它包含元素(请参阅):
设置新密码
新密码
确认新密码
回答您的安全问题:
登上月球需要多少杯糖