J'utilise un css personnalisé qui ressemble à ce qui suit pour une page html exactement comme cet exemple, disons index.html:

html {
  overflow-y: scroll;
}

body {
    font-family: Helvetica, Arial, Verdana;
    background: #efefef url('../img/ticks.png') repeat 0 0;
    margin:15px 0 0 0;
    font-size:12px;
}


.container { 
    position: relative; 
    width: 960px; 
    margin: 0 auto; 
    -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;  
}

#filters {
    margin:1%;
    padding:0;
    list-style:none;
}

    #filters li {
        float:left;
    }

    #filters li span {
        display: block;
        padding:5px 20px;       
        text-decoration:none;
        color:#666;
        cursor: pointer;
    }

    #filters li span.active {
        background: #e95a44;
        color:#fff;
    }



#portfoliolist .portfolio {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    width:23%;
    margin:1%;
    display:none;
    float:left;
    overflow:hidden;
}

    .portfolio-wrapper {
        overflow:hidden;
        position: relative !important;
        background: #666;
        cursor:pointer;
    }

    .portfolio img {
        max-width:100%;
        position: relative;
        top:0;
    -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);     
    }

    .portfolio .label {
        position: absolute;
        width: 100%;
        height:40px;
        bottom:-40px;
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    }

        .portfolio .label-bg {
            background: #e95a44;
            width: 100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
        }

        .portfolio .label-text {
            color:#fff;
            position: relative;
            z-index:500;
            padding:5px 8px;
        }

            .portfolio .text-category {
                display:block;
                font-size:9px;
            }

    .portfolio:hover .label {
    bottom:0;
  }
    .portfolio:hover img {
    top:-30px;
  }  





/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        width: 768px; 
    }
}


/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
    .container { 
        width: 95%; 
    }

    #portfoliolist .portfolio {
        width:48%;
        margin:1%;
    }       

    #ads {
        display:none;
    }

}


/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 70%;
    }

    #ads {
        display:none;
    }

}

/* #Clearing */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

Pour faire correspondre le modèle de index.html avec le reste des pages du site Web (qui dépend complètement du bootstrap css et indépendant de ce css), en particulier à la partie en-tête et pied de page, j'ai ajouté les lignes suivantes dans le champ d'en-tête sur index.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-jhdkjsahd#SomeRandomCheckSumProvidedByBootstrap#asjdhasdkjhsdkj" crossorigin="anonymous">

Cela modifie le comportement réel de ce qui suit

normal

À quelque chose comme ça

enter image description here

Où le texte au survol disparaît.

Le code html de l'élément ci-dessus est le suivant:

<div class="portfolio logo" data-cat="logo">
                <div class="portfolio-wrapper">             
                    <img src="img/portfolios/logo/5.jpg" alt="" />
                    <div class="label">
                        <div class="label-text">
                            <a class="text-title">Bird Document</a>
                            <span class="text-category">Logo</span>
                        </div>
                        <div class="label-bg"></div>
                    </div>
                </div>
            </div>      

J'utilise le css boostrap uniquement pour l'en-tête et le pied de page de la page index.html, et par conséquent, j'ai essayé d'utiliser la balise <style scoped> comme décrit ici, mais je crains que ce ne soit pas une bonne façon de gérer cela.

Comment résoudre ce problème?

0
kingmakerking 21 avril 2017 à 15:36

3 réponses

Meilleure réponse

Sans voir le code réel, il est impossible de vous donner un balisage réel pour votre situation. Cependant, la spécificité est à la base du problème. Vous pouvez en savoir plus ici.

Fondamentalement, plus vous utilisez de sélecteurs dans votre CSS, plus il sera classé en spécificité. Par exemple, en référençant votre HTML ci-dessus,

.text-title {}

N'est pas très spécifique.

.label-text .text-title {}

Est plus spécifique et prévaudra.

.label .label-text .text-title {}

Est encore plus spécifique. Et:

div.label > .label-text > .text-title {}

Est encore plus spécifique et prévaudra sur toutes les autres.

La solution au problème est donc que votre CSS doit être plus spécifique que le CSS Boostrap. Inspectez les éléments problématiques dans le navigateur et voyez quels sélecteurs Bootstrap utilise. Utilisez ensuite des éléments plus spécifiques dans votre CSS personnalisé.

Malheureusement, Bootstrap utilise !important dans un certain nombre de situations, vous serez donc obligé de l'utiliser également pour surmonter le leur.

2
sn3ll 21 avril 2017 à 13:58

J'ai rencontré le même problème avec ce que vous essayez de faire et je l'ai finalement résolu en définissant la propriété d'affichage de l'étiquette div sur block. J'ai également remarqué que Chrome corrige automatiquement le problème contrairement à Safari.

0
Raef Khaled 8 août 2017 à 17:37

Vous pouvez ajouter ! Important après chaque style de votre classe. L'ajout de ! Important donnera au CSS plus de priorité / poids t, ce qui vous permettra de remplacer d'autres styles.

OU vous pouvez le faire avec-

Liez votre fichier custom.css doit être la dernière entrée sous le fichier bootstrap.css. Le style Custom.css remplacera bootstrap.css

Ex Html: -

-1
shital jadhav 21 avril 2017 à 12:58