How can I change the default width of a Twitter Bootstrap modal box?

后端 未结 30 2463
醉酒成梦
醉酒成梦 2020-11-27 08:38

I tried the following:

   
相关标签:
30条回答
  • 2020-11-27 09:13

    If you want something that does not break the relative design try this:

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

    As, @Marco Johannesen says, the "body" before the selector is so that it takes a higher priority than the default.

    0 讨论(0)
  • 2020-11-27 09:13

    Add the following on your css file

    .popover{
             width:auto !important; 
             max-width:445px !important; 
             min-width:200px !important;
           }
    
    0 讨论(0)
  • 2020-11-27 09:15

    In Bootstrap 3+ the most appropriate way to change the size of a modal dialog is to use the size property. Below is an example, notice the modal-sm along the modal-dialog class, indicating a small modal. It can contain the values sm for small, md for medium and lg for large.

    <div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
      <div class="modal-dialog modal-sm"> <!-- property to determine size -->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="modal_title">Some modal</h4>
          </div>
          <div class="modal-body">
    
            <!-- modal content -->
    
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
          </div>
        </div>
      </div>
    </div>
    
    0 讨论(0)
  • 2020-11-27 09:15

    Use Below Script:

    .modal {
      --widthOfModal: 98%;
      width: var(--widthOfModal) !important;
      margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
      height: 92%;
    
      overflow-y: scroll;
    }
    

    Demo:

    Demo on gif

    0 讨论(0)
  • 2020-11-27 09:16

    I solved it for Bootstrap 4.1

    Mix of previously posted solutions

    .modal-lg {
      max-width: 90% !important; /* desired relative width */
      margin-left:auto !important;
      margin-right:auto !important;
    }

    0 讨论(0)
  • 2020-11-27 09:16

    Less-based solution (no js) for Bootstrap 2:

    .modal-width(@modalWidth) {
        width: @modalWidth;
        margin-left: -@modalWidth/2;
    
        @media (max-width: @modalWidth) {
            position: fixed;
            top:   20px;
            left:  20px;
            right: 20px;
            width: auto;
            margin: 0;
            &.fade  { top: -100px; }
            &.fade.in { top: 20px; }
        }
    }
    

    Then wherever you want to specify a modal width:

    #myModal {
        .modal-width(700px);
    }
    
    0 讨论(0)
提交回复
热议问题