引导弹出框太窄答案

【问题标题】：Bootstrap popover is too narrow引导弹出框太窄
【发布时间】：2016-02-11 13:31:16
【问题描述】：

我有一个 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>

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3 popover

【解决方案1】：

您只需要设置data-container 属性来告诉弹出框使用哪个元素作为它的包含元素（参见documentation）：

  <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-container=".container-fluid" 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>

http://jsfiddle.net/0y8oy7gf/3/

【讨论】：