Jeśli chcesz, aby był responsywny tylko za pomocą CSS, użyj tego:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

Uwaga 1: używałem klasy .large, można też to zrobić na normalnym .modal

Uwaga 2: w Bootstrap 3 ujemny margines lewy może nie być już potrzebny (nie potwierdzone osobiście)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

Uwaga 3: w Bootstrap 3 i 4 istnieje klasa modal-lg. Więc może to być wystarczające, ale jeśli chcesz, aby był responsywny, nadal potrzebujesz poprawki, którą podałem dla Bootstrap 3.

W niektórych aplikacjach fixed używane są Modale, w takim przypadku można spróbować width:80%; left:10%; (formuła: left = 100-width / 2)

Jeśli używasz Bootstrap 3, musisz zmienić modal-dialog div, a nie modal div, jak to jest pokazane w zaakceptowanej odpowiedzi. Ponadto, aby zachować responsywny charakter Bootstrap 3, ważne jest, aby napisać nadpisanie CSS za pomocą zapytania o media, aby modalne były na całej szerokości na mniejszych urządzeniach.

Zobacz Ten JSFiddle do eksperymentowania z różnymi szerokościami.

HTML

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

Jeśli chcesz coś, co nie łamie względnego projektu spróbuj tego:

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

Jak mówi @ Marco Johannesen, "ciało" przed selektorem jest tak, że ma wyższy priorytet niż domyślny.

W Bootstrap 3+ najodpowiedniejszym sposobem zmiany rozmiaru okna modalnego jest użycie właściwości size. Poniżej znajduje się przykład, zwróć uwagę na modal-sm wzdłuż klasy modal-dialog, wskazując mały modal. Może zawierać wartości {[3] } dla małych, md dla średnich i lg dla dużych.

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

Dla {[2] }Oto Jak to zrobić.

Dodaj styl modal-wide do znaczników HTML (dostosowany z przykładu W dokumentach 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 -->

I dodać następujący CSS

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

Nie ma potrzeby nadpisywania margin-left w Bootstrap 3, aby to teraz było wyśrodkowane.

In Bootstrap 3 wszystko czego potrzebujesz to

<style>
    .modal .modal-dialog { width: 80%; }
</style>

Większość z powyższych odpowiedzi nie działa dla mnie !!!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<style>
  #myModal1 .modal-dialog {
    width: 80%;
  }
  #myModal2 .modal-dialog {
    width: 50%;
  }
</style>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  80%
</button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  50%
</button>
<center>
  <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <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">
          custom width : 80%
        </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>
    </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <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">
          custom width : 50%
        </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>
    </div>
  </div>

</center>

Rozwiązanie zostało zaczerpnięte z tej strony

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

W v3 Bootstrap istnieje prosta metoda powiększenia modalu. Wystarczy dodać klasę modal-lg obok modal-dialog.

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">

Bootstrap 3: w celu utrzymania responsywnych funkcji dla małych i bardzo małych urządzeń zrobiłem co następuje:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}

Jeśli Bootstrap>3, po prostu dodaj styl do modalu.

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>

Znalazłem rozwiązanie, które działa lepiej dla mnie. Możesz użyć tego:

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

Lub to w zależności od twoich wymagań:

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

Zobacz post, w którym znalazłem, że: https://github.com/twitter/bootstrap/issues/675

To jest to, co zrobiłem, w moim zwyczaju.css dodałem te linie i tyle.

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

Oczywiście, można zmienić rozmiar szerokości.

FYI Bootstrap 3 obsługuje lewą właściwość automatycznie. Więc po prostu dodanie tego CSS zmieni szerokość i utrzyma ją w środku:

.modal .modal-dialog { width: 800px; }

Zachowaj responsywny projekt, ustaw szerokość na to, czego pragniesz.

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

Zmieniając klasę model-dialog można osiągnąć oczekiwany wynik. Te małe sztuczki działają na mnie. Mam nadzieję, że pomoże Ci rozwiązać ten problem.

.modal-dialog {
    width: 70%;
}

Z Bootstrap 3, wszystko, co jest wymagane, to wartość procentowa podana do okna modalnego za pomocą CSS

CSS

#alertModal .modal-dialog{
     width: 20%;
}

Użyłem kombinacji CSS i jQuery, wraz ze wskazówkami na tej stronie, aby utworzyć płynną szerokość i wysokość za pomocą Bootstrap 3.

Najpierw jakiś CSS do obsługi szerokości i opcjonalny scrollbar dla obszaru zawartości

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

A następnie trochę jQuery, aby dostosować wysokość obszaru zawartości w razie potrzeby

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

Pełny zapis i Kod na http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

W Bootstrap 3 z CSS możesz po prostu użyć:

body .modal-dialog {
    /* percentage of page width */
    width: 40%;
}

Gwarantuje to, że nie złamiesz projektu strony, ponieważ używamy .modal-dialog zamiast .modal, które zostaną zastosowane nawet do cieniowania.

Spróbuj czegoś takiego jak poniżej (zobacz przykład live jsfiddle tutaj: http://jsfiddle.net/periklis/hEThw/1/)

<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

Zamiast używać procentów do responsywnego modalu, uważam, że można uzyskać większą kontrolę dzięki użyciu kolumn i innych elementów responsywnych wbudowanych już w bootstrap.

Aby modal responsywny / rozmiar dowolnej ilości kolumn:

1) dodaj dodatkowy div wokół modal-dialog div z klasą .Pojemnik -

<div class="container">
    <div class="modal-dialog">
    </div>
</div>

2) dodaj trochę CSS, aby modal miał pełną szerokość -

.modal-dialog {
    width: 100% }

3) ewentualnie dodać w extra class jeśli masz inne Modale -

<div class="container">
    <div class="modal-dialog modal-responsive">
    </div>
</div>

.modal-responsive.modal-dialog {
    width: 100% }

4) Dodaj w wierszu / kolumnach, jeśli chcesz Modale o różnych rozmiarach -

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="modal-dialog modal-responsive">
       ...
      </div>
    </div>
  </div>
</div>

Dodaj następujący plik css

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }

Użyj Poniższego Skryptu:

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

  overflow-y: scroll;
}

Demo :

Osiągnąć oczekiwany wynik za pomocą,

.modal-dialog {
    width: 41% !important;
}

Użyłem tego sposobu, i to jest praca idealna dla mnie

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});

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

Wtedy gdzie chcesz określić szerokość modalną:

#myModal {
    .modal-width(700px);
}

Użyłem SCSS, i w pełni responsywny modal:

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
} 

you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name.    

body .modal-nk {
        /* new custom width */
        width: 560px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -280px;
    }

Lub

body .nk-modal {
            /* new custom width */
            width: 560px;
            /* must be half of the width, minus scrollbar on the left (30px) */
            margin-left: -280px;
        }

Poniżej znajduje się kod do Ustawienia modalnej szerokości wyskakującego okienka i lewej pozycji z ekranu za pomocą javascript.

$('#openModalPopupId').css({ "width": "80%", "left"": "30%"});

Bootstrap 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>

Uwaga dodałem .miejsce w II lidze. Więc wystylizuj tę klasę.

.employeeModal{
        width: 700px;
    }