Question

我无法弄清楚这一点。我在我的网站上使用Bootstrap模式，我想改变按钮的位置，而不是对话框。无论我改变什么，它都停留在页面左侧。这就是我在索引中的内容

<!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Create Event</button>

我如何在页面上移动它？

Answer 1

如果查看css，可以看到以下类：

.close {
  float: right;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}

我会创建另一个在您的文档中加载的样式表，然后添加另一个.close类并添加float:left;

Answer 2

另一种使用top，bottom，left和right css属性的方法。这里有一些documentation解释它们。这是一个jsfiddle http://jsfiddle.net/gV6y8/84/我编辑了移动模态按钮。希望它有所帮助。

以下是小提琴内部的代码：

HTML：

    <a id="modalbutton" data-toggle="modal" href="#defaultModal" class="btn btn-primary btn-large">Default Modal</a>
    <br>

    <div id="defaultModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h4 id="modal-label">Example Without Pull Right Modal</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <textarea class="form-control" rows="3"></textarea>
                        <button type="submit" class="btn btn-success">Submit</button>
                    </form>
                </div>
            </div> <!--modal-content-->
        </div> <!--modal-dialog-->
    </div> <!--modal-->

的CSS：

    #modalbutton{
        position:absolute;
        bottom:100px;
        left: 400px;
    }

如何更改模态按钮的位置

2 个答案: