web-dev-qa-db-fra.com

Essayer d'élargir le modal bootstrap

J'utilise ce code mais le modal est trop fin:

<div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-lg">
            <div class="modal-header modal-lg">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Solutions</h4>
            </div>
            <div class="modal-body modal-lg">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

Voici à quoi ça ressemble:

Thin modal

Comment puis-je rendre ce modal beaucoup plus large? Idéalement, j'aimerais qu'il soit environ le double de cette largeur car il est trop maigre pour le moment.

twitter-bootstrapmodal-dialog
52
b85411

Ayez toujours à portée de main le code CSS non modifié pour le démarrage afin que vous puissiez voir quels styles ils ont sur leurs composants, puis créez un fichier CSS APRÈS celui-ci, si vous n'utilisez pas LESS et écrasez leurs mixins

C'est le css modal par défaut pour 768px et plus:

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  ...
}

Ils ont une classe modal-lg pour des largeurs supérieures

@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

Si vous avez besoin de quelque chose de deux fois la taille 600px et de fluide, faites quelque chose comme ceci dans votre CSS après le css Bootstrap et assignez cette classe à la boîte de dialogue modale.

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

HTML

<div class="modal-dialog modal-xl">

Démo: http://jsbin.com/yefas/1

132
Christina

Si vous avez besoin de cette solution pour seulement quelques types de modaux, utilisez simplement l'attribut style="width:90%".

exemple:

div class="modal-dialog modal-lg" style="width:90%"

note: cela ne changera que ce modal particulier

0
Krzyszof Ra

Tu pourrais essayer:

.modal.modal-wide .modal-dialog {
  width: 90%;
}

.modal-wide .modal-body {
  overflow-y: auto;
}

Ajoutez simplement .modal-wide à vos cours

0
Tjay