我如何改变Twitter引导模式框的默认宽度?

我尝试了以下方法:

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

这段Javascript:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

结果不是我预料的那样。模态的左上角位于屏幕的中心。

有人能帮帮我吗?有人试过吗?我想这是一件很平常的事。

当前回答

3.引导x.x

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
            </div>

            <div class="modal-body row">
                Modal Body...
            </div>

            <div class="modal-footer"> 
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

        </form>

    </div>
</div>

注意，我在第二个div中添加了. employeemodal类。然后设置该类的样式。

.employeeModal{
        width: 700px;
    }

2017-08-04 03:34:21

其他回答

这就是我在custom。css中所做的，我添加了这些行，仅此而已。

.modal-lg {
    width: 600px!important;
    margin: 0 auto;
}

显然，你可以改变宽度的大小。

2014-06-22 14:09:55

如果你想要一些不会破坏相对设计的东西，试试这个:

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

正如@Marco Johannesen所说，选择器之前的“主体”是为了让它具有比默认更高的优先级。

2012-05-09 09:49:46

解决方案取自此页

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});

2012-07-05 11:03:22

对于Bootstrap 3，这里是如何做到这一点。

在HTML标记中添加一个模态范围样式(从Bootstrap 3文档中的示例改编而来)

<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

并添加以下CSS

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

现在不需要在Bootstrap 3中覆盖margin-left来让它居中。

2013-09-04 01:00:16

保留响应式设计，将宽度设置为您想要的。

.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

保持简单。

2014-02-19 13:09:13

我如何改变Twitter引导模式框的默认宽度?

推荐文章

最新文章

标签