Comment puis-je modifier la largeur par défaut d’une boîte modale Twitter Bootstrap ?

Question

J’ai essayé ce qui suit :

Et ce Javascript :

Le résultat, c’est pas ce que j’attendais. Le modale en haut à gauche est positionné au centre de l’écran.

Quelqu'un peut-il m’aider. Quelqu'un d’autre a essayé cela. Je suppose que ce n’est pas une chose inhabituelle de vouloir faire.

Answer 1

Y a-t-il une certaine raison, vous essayez de le changer avec JS/jQuery ?

Vous pouvez facilement le faire avec juste le CSS, ce qui signifie que vous n’avez pas à faire votre style dans le document. Dans votre propre fichier CSS personnalisée que vous ajoutez :

Donc dans votre cas :

La raison pour laquelle que j’ai mis le corps avant le sélecteur est qu’il prenne une priorité plus élevée que la valeur par défaut. De cette façon vous pouvez l’ajouter à un fichier CSS personnalisé et sans soucis à jour Bootstrap.

Answer 2

Si vous voulez rendre sensible avec juste de CSS, utilisez ceci :

Note 1 : J’ai utilisé un classe, vous pouvez aussi le faire sur la normale

Note 2 : dans le Bootstrap 3 la marge négative à gauche ne peut pas être nécessaire plus (non confirmé personnellement)

Answer 3

Si vous êtes en utilisant Bootstrap 3, vous avez besoin de changer la modale de dialogue div et pas la lightbox div comme il est montré dans la accepté de répondre. Aussi, pour garder la nature réactive de Bootstrap 3, il est important d'écrire le remplacer CSS à l'aide d'une requête de support de sorte que le modal sera pleine largeur sur de plus petits appareils.

Voir ce JSFiddle à expérimenter avec différentes largeurs.

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) */
    }
}

Answer 4

Si vous voulez quelque chose qui ne casse pas la conception relative essayer ceci :

Comme, @Marco Johannesen dit, le « corps » avant que le sélecteur est qu’il prenne une priorité plus élevée que la valeur par défaut.

Answer 5

Pour `` Voici comment le faire.

Ajouter une `` de style à votre balisage HTML (comme l’adaptation de l’exemple dans les docs de Bootstrap 3)

et d’ajouter le CSS suivant

Il n’y a pas besoin de substituer en pour que cela soit centré maintenant.