你如何改变模态按钮的位置

Question

我想不通。我正在为我的网站使用 Bootstrap 模态，我想更改按钮的位置，而不是对话框。无论我更改什么，它都会卡在页面左侧。这就是我在 index

中的内容

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

如何在页面上移动它？

Answer 1

如果您查看 css，您可以看到以下内容 class：

.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 class 并添加 float:left;

Answer 2

另一种使用顶部、底部、左侧和右侧 css 属性的方法。这是我编辑的一些 documentation explaining them. Here is a jsfiddle http://jsfiddle.net/gV6y8/84/ 移动模式按钮。希望对你有帮助。

这里是fiddle里面的代码：

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

你如何改变模态按钮的位置

How do you change the positioning of the modal button

html

javascript

css

modal-dialog

twitter-bootstrap