http://jsfiddle.net/0y8oy7gf/2/
我有一个Bootstrap 3表单,其中有一个气泡放置在第一个文本输入框的右侧。当输入框获得焦点时,气泡被触发,并且触发器正常工作。我的问题是,我希望气泡更宽,以便我可以有更长的文本行,但似乎它被包含在父元素.col-xs-6
中。是否有任何方法可以使其由.container-fluid
包含,以便它可以占用右侧的空白空间?以下是HTML代码,上面的jsfiddle演示了问题。谢谢!
<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>