将按钮弹出窗口与 bootstrap 一起使用

Question

我正在为一个简单的网页使用 boostrap。我试图在页面中间的最底行放置一个对接。这是一个弹出按钮。但是，当我放置此按钮并单击它以显示弹出消息时，消息应位于的位置没有弹出框，该消息仅出现在我的网页上并且仅覆盖右侧页面，下面是我的 html 代码：

<div class="row text-center contact-row">
                <div class="col-md-12">
                    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on right
                    </button>
                    <br>
                </div>
            </div>

下面是我的 javascript 代码：

<script type="text/javascript">
    $(function () {
     $('[data-toggle="popover"]').popover()
    })
    </script>

我的问题是： 1.) 如何将按钮放在页面中间？ 2.) 如何让弹出消息出现在弹出消息框中而不是页面本身？

Answer 1

我会首先要求您验证您的 js 文件和您的 css。确保您已导入以下内容：

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 确保它出现在任何其他 Bootstrap 文件之前（在 Bootstrap 之前包括 JQuery）。

例如：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>

回答你的第一个问题：首先在整个东西周围添加一个class容器

<div class="container">
    <div class="row center-middle">
        <div class="col-md-12">
          <button>......</button>
       </div>
    </div>

</div>

在你的 css 中：

.center-middle{
     min-height: 100%; 
     display: flex;
     align-items: center;
}

将按钮弹出窗口与 bootstrap 一起使用

Using Button Popovers with bootstrap

html

jquery

button

popover

twitter-bootstrap