Des coins arrondis sur bootstrap modal div

J'ai un .NET page à l'aide de certains de Bootstrap de balisage pour créer un div qui sera plus tard utilisé comme une fenêtre modale. Je veux arrondir les angles. Lors de la modification de la CSS semble l'effet de la largeur de la bordure et la couleur, je ne peux pas faire border-radius travail. Voici mon code HTML:

<div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true">
        <div class="modal-dialog ui-corner-all">
            <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="productModalLabel">Product</h4>
                </div>
                <div class="modal-body" id="contentDiv">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="orderClose">Close</button>
                    <button type="button" class="btn btn-primary" id="orderSave">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

Mon JQuery appelle un service web qui s'appuie HTML et insère int dans #contentDiv et qui fonctionne très bien. Voici mon CSS pour les coins arrondis:

.modal-header {
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #0480be;
    -webkit-border-top-left-radius: 100px;
    -webkit-border-top-right-radius: 100px;
    -moz-border-radius-topleft: 100px;
    -moz-border-radius-topright: 100px;
     border-top-left-radius: 100px;
     border-top-right-radius: 100px;
 }


.modal-header {
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #0480be;
    -webkit-border-bottom-left-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    -moz-border-radius-bottomleft: 100px;
    -moz-border-radius-bottomright: 100px;
     border-bottom-left-radius: 100px;
     border-top-right-radius: 100px;
 }

.modal-dialog {
    border: 3px solid #000000;
    width: 900px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
     border-radius: 100px;
}

Pourquoi ne pas border-radius travail? J'ai changé le nombre de certains drastique des choses pour voir si cela fait une différence, mais rien ne change. Comme indiqué, je ne peux rien changer à la frontière de référence ou de la largeur de référence et de voir les changements, de sorte qu'il est voir les .modal-classe de boîte de dialogue. toutes les idées ici?

Avec les outils de dev, j'ai trouvé que border-radius: 6px; est appliqué .modal-content et ne pas le faire .modal-header et .modale de dialogue.
Pour tous ceux qui cherchent à supprimer les coins arrondis de la modale vous pouvez ajouter border-radius: 0; à .modal-content dans votre feuille de style.

OriginalL'auteur Michael Mahony | 2013-12-30

  1. 4

    La réponse est en fait évident, mais je ne pensais PAS clairement. Tout ce que j'avais à faire était de les ajouter !important après chaque ligne parce que le bootstrap.le css a été prise precendence. Une fois que j'ai ajoutée !important le problème a été résolu immédiatement. Juste pensé que je voudrais ajouter ceci dans le cas où quelqu'un d'autre a ce problème à l'avenir.

    Vous pouvez envisager d'ajouter à votre fichier CSS spécifique après l'Amorçage.fichier css. Cela vous évitera d'avoir à utiliser !des déclarations importantes, qui sont mal vus et peuvent provoquer des problèmes avec la résolution des problèmes dans l'avenir.

    OriginalL'auteur Michael Mahony