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>

回答你的第一个问题：首先在整个事物中添加一个类容器

<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;
}

使用Button Popovers和bootstrap

1 个答案: